// LandingPage.jsx — Full landing with all sections

// ── Mock app screenshot components ──────────────────────────────────────────

const AppScreenSearch = () => (
  <div style={{background:'#e4e9f0', borderRadius:12, overflow:'hidden', fontFamily:"'Helvetica Neue',sans-serif"}}>
    <div style={{background:'#fff', padding:'10px 12px', borderBottom:'1px solid #e9ecef', display:'flex', alignItems:'center', gap:8}}>
      <div style={{background:'#f0f4f8', borderRadius:8, flex:1, padding:'7px 10px', fontSize:11, color:'#adb5bd', display:'flex', alignItems:'center', gap:6}}>
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#adb5bd" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
        Dental · Las Condes
      </div>
    </div>
    <div style={{padding:'8px 10px', display:'flex', gap:6, background:'#e4e9f0'}}>
      {['Dental','Kine','Psico'].map((t,i) => <span key={t} style={{background: i===0?'#0984e3':'#fff', color: i===0?'#fff':'#636e72', borderRadius:20, padding:'4px 10px', fontSize:10, fontWeight: i===0?700:400}}>{t}</span>)}
    </div>
    {[
      {name:'Box Dental Premium', loc:'Las Condes', price:'$8.500', avail:true},
      {name:'Box Kinesiología', loc:'Providencia', price:'$6.000', avail:true},
    ].map(b => (
      <div key={b.name} style={{background:'#fff', margin:'0 8px 8px', borderRadius:10, padding:10, border:'1px solid #e9ecef'}}>
        <div style={{background:'#f0f4f8', borderRadius:6, height:48, marginBottom:8, display:'flex', alignItems:'center', justifyContent:'center'}}>
          <span style={{fontSize:9, color:'#adb5bd', fontFamily:'monospace'}}>foto del box</span>
        </div>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start'}}>
          <div>
            <div style={{fontSize:11, fontWeight:700}}>{b.name}</div>
            <div style={{fontSize:9, color:'#636e72'}}>{b.loc}</div>
          </div>
          <div style={{fontSize:13, fontWeight:800, color:'#0984e3'}}>{b.price}<span style={{fontSize:8, color:'#adb5bd'}}>/hr</span></div>
        </div>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:6}}>
          <span style={{fontSize:9, background:'#d4edda', color:'#155724', borderRadius:10, padding:'2px 6px', fontWeight:600}}>● Disponible</span>
          <span style={{fontSize:9, background:'#0984e3', color:'#fff', borderRadius:6, padding:'4px 8px', fontWeight:600}}>Reservar</span>
        </div>
      </div>
    ))}
  </div>
);

const AppScreenOwner = () => (
  <div style={{background:'#F8F9FA', borderRadius:12, overflow:'hidden', fontFamily:"'Helvetica Neue',sans-serif"}}>
    <div style={{background:'#0984e3', padding:'12px 14px 20px'}}>
      <div style={{fontSize:10, color:'rgba(255,255,255,0.7)', marginBottom:2}}>Ingresos Mayo 2026</div>
      <div style={{fontSize:22, fontWeight:800, color:'#fff'}}>$225.000</div>
      <div style={{display:'flex', alignItems:'flex-end', gap:3, marginTop:10, height:30}}>
        {[40,60,50,80,100,85,95].map((h,i) => (
          <div key={i} style={{flex:1, background:'rgba(255,255,255,0.3)', borderRadius:'2px 2px 0 0', height:`${h}%`}}></div>
        ))}
      </div>
    </div>
    <div style={{padding:'10px 12px'}}>
      <div style={{fontSize:10, fontWeight:700, marginBottom:8, color:'#2D3436'}}>Mis boxes</div>
      {[
        {name:'Box Dental 1', status:'open', rev:'$153.000'},
        {name:'Box Kine', status:'open', rev:'$72.000'},
        {name:'Box Dental 2', status:'blocked', rev:'—'},
      ].map(b => (
        <div key={b.name} style={{background:'#fff', borderRadius:8, padding:'8px 10px', marginBottom:6, display:'flex', alignItems:'center', gap:8, border:'1px solid #e9ecef'}}>
          <div style={{width:28, height:28, background:'#f0f4f8', borderRadius:6, flexShrink:0}}></div>
          <div style={{flex:1}}>
            <div style={{fontSize:10, fontWeight:700}}>{b.name}</div>
            <div style={{fontSize:9, color:'#0984e3', fontWeight:600}}>{b.rev}</div>
          </div>
          <div style={{width:28, height:16, borderRadius:8, background: b.status==='open'?'#0984e3':'#dee2e6', position:'relative'}}>
            <div style={{position:'absolute', top:2, width:12, height:12, borderRadius:'50%', background:'#fff', boxShadow:'0 1px 2px rgba(0,0,0,0.2)', left: b.status==='open'?14:2, transition:'left 0.2s'}}></div>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const AppScreenSlots = () => (
  <div style={{background:'#F8F9FA', borderRadius:12, overflow:'hidden', fontFamily:"'Helvetica Neue',sans-serif"}}>
    <div style={{background:'#fff', padding:'10px 12px', borderBottom:'1px solid #e9ecef'}}>
      <div style={{fontSize:11, fontWeight:700}}>Seleccionar horario</div>
      <div style={{fontSize:9, color:'#636e72'}}>Box Dental Premium · Las Condes</div>
    </div>
    <div style={{padding:'8px 10px'}}>
      <div style={{display:'flex', gap:4, marginBottom:8, overflowX:'hidden'}}>
        {['Lun','Mar','Mié','Jue','Vie'].map((d,i) => (
          <div key={d} style={{flex:1, background: i===0?'#0984e3':'#fff', borderRadius:8, padding:'5px 2px', textAlign:'center', border: i===0?'none':'1px solid #dee2e6'}}>
            <div style={{fontSize:8, color: i===0?'rgba(255,255,255,0.8)':'#adb5bd'}}>{d}</div>
            <div style={{fontSize:11, fontWeight:800, color: i===0?'#fff':'#2D3436'}}>{2+i}</div>
          </div>
        ))}
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:4}}>
        {[{t:'08:00',s:'free'},{t:'09:00',s:'taken'},{t:'10:00',s:'sel'},{t:'11:00',s:'buffer'},{t:'12:00',s:'free'},{t:'13:00',s:'free'}].map(sl => (
          <div key={sl.t} style={{borderRadius:7, padding:'7px 4px', textAlign:'center', background: sl.s==='sel'?'#0984e3':sl.s==='taken'?'#f8d7da':sl.s==='buffer'?'#e9ecef':'#fff', border:`1px solid ${sl.s==='sel'?'#0984e3':sl.s==='taken'?'#f5c6cb':'#dee2e6'}`}}>
            <div style={{fontSize:10, fontWeight:700, color: sl.s==='sel'?'#fff':sl.s==='taken'?'#721c24':'#2D3436'}}>{sl.t}</div>
            <div style={{fontSize:8, color: sl.s==='sel'?'rgba(255,255,255,0.8)':'#adb5bd'}}>{sl.s==='sel'?'✓ selec':sl.s==='taken'?'ocupado':sl.s==='buffer'?'buffer':'60 min'}</div>
          </div>
        ))}
      </div>
      <div style={{background:'#0984e3', borderRadius:8, padding:'9px', textAlign:'center', marginTop:8}}>
        <div style={{fontSize:10, fontWeight:700, color:'#fff'}}>Confirmar · $9.350 total</div>
      </div>
    </div>
  </div>
);

// ── LANDING PAGE ─────────────────────────────────────────────────────────────
const LandingPage = ({ onNavigate }) => {
  const [searchQuery, setSearchQuery] = React.useState('');
  const [searchLocation, setSearchLocation] = React.useState('');
  const isMobile = useWindowWidth() <= 768;

  return (
    <div style={lS.root}>
      {/* NAV */}
      <nav style={lS.nav}>
        <div style={lS.navInner}>
          <div style={lS.logo}>
            <img src="uploads/lokat_color.png" alt="Lokat" style={{height:32, objectFit:'contain'}} />
          </div>
          <div style={{...lS.navLinks, gap: isMobile ? 4 : 8}}>
            {!isMobile && <button style={lS.navLink} onClick={() => onNavigate('owner')}>Para Propietarios</button>}
            {!isMobile && <button style={lS.navLink} onClick={() => onNavigate('admin')}>Admin</button>}
            {!isMobile && <button style={lS.navLink} onClick={() => onNavigate("auth", { initialScreen: "register" })}>Registrarse</button>}
            <button style={lS.navCta} onClick={() => onNavigate("auth", { initialScreen: "login" })}>Iniciar sesión</button>
          </div>
        </div>
      </nav>

      {/* ── 1. HERO ── */}
      <section style={{...lS.hero, flexDirection: isMobile ? 'column' : 'row', padding: isMobile ? '36px 16px 40px' : '80px 24px 80px', gap: isMobile ? 32 : 60}}>
        <div style={lS.heroContent}>
          <div style={lS.badge}>🏥 Marketplace Médico #1 de Chile</div>
          <h1 style={{...lS.heroTitle, fontSize: isMobile ? 34 : 52}}>
            El box médico que<br />
            <span style={lS.heroAccent}>necesitas, cuando</span><br />
            lo necesitas.
          </h1>
          <p style={{...lS.heroSub, fontSize: isMobile ? 15 : 18}}>
            Reserva boxes clínicos equipados por hora. Verificación SIS automática. Sin contratos largos.
          </p>
          <div style={{...lS.searchBar, flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'stretch' : 'center', padding: isMobile ? '8px' : '8px 8px 8px 16px', gap: isMobile ? 4 : 0}}>
            <div style={lS.searchField}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0984e3" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
              <input style={lS.searchInput} placeholder="Especialidad o tipo de box..." value={searchQuery} onChange={e => setSearchQuery(e.target.value)} />
            </div>
            {!isMobile && <div style={lS.searchDivider} />}
            <div style={lS.searchField}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0984e3" strokeWidth="2"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
              <input style={lS.searchInput} placeholder="Comuna o dirección..." value={searchLocation} onChange={e => setSearchLocation(e.target.value)} />
            </div>
            <button style={{...lS.searchBtn, width: isMobile ? '100%' : 'auto', borderRadius: isMobile ? 8 : 10}} onClick={() => onNavigate('search')}>Buscar boxes</button>
          </div>
          <div style={lS.quickFilters}>
            {['Dental', 'Kinesiología', 'Psicología', 'Medicina General', 'Dermatología'].map(tag => (
              <button key={tag} style={lS.filterTag} onClick={() => onNavigate('search')}>{tag}</button>
            ))}
          </div>
        </div>
        {!isMobile && <div style={lS.heroVisual}>
          <div style={lS.heroCard}>
            <div style={lS.heroCardHeader}>
              <span style={lS.heroCardBadge}>Disponible ahora</span>
              <span style={lS.heroCardPrice}>$8.500/hr</span>
            </div>
            <div style={lS.heroCardTitle}>Box Dental • Las Condes</div>
            <div style={lS.heroCardEquip}>
              <span style={lS.equipTag}>🦷 Unidad Dental</span>
              <span style={lS.equipTag}>💻 PC Clínico</span>
              <span style={lS.equipTag}>🚿 Lavamanos</span>
            </div>
            <div style={lS.heroCardSlots}>
              {['09:00', '10:00', '14:00', '15:00', '16:00'].map((t, i) => (
                <div key={t} style={{...lS.slot, ...(i === 1 ? lS.slotActive : {})}}>{t}</div>
              ))}
            </div>
            <button style={lS.heroCardBtn} onClick={() => onNavigate('search')}>Reservar en 3 clics →</button>
          </div>
          <div style={{...lS.floatStat, bottom: '-18px', right: '20px'}}>
            <div style={lS.floatStatNum}>1.200+</div>
            <div style={lS.floatStatLabel}>boxes activos</div>
          </div>
          <div style={{...lS.floatStat, bottom: '-18px', left: '20px'}}>
            <div style={lS.floatStatNum}>98%</div>
            <div style={lS.floatStatLabel}>verificados SIS</div>
          </div>
        </div>}
      </section>

      {/* ── 2. STATS BAR ── */}
      <section style={{...lS.statsBar, display: isMobile ? 'grid' : 'flex', gridTemplateColumns: isMobile ? '1fr 1fr' : undefined, gap: isMobile ? 0 : 80, padding: isMobile ? '24px 16px' : '40px 24px'}}>
        {[
          { n: '1.200+', l: 'Boxes activos' },
          { n: '$8.500', l: 'Precio prom/hr' },
          { n: '3 min', l: 'Tiempo de reserva' },
          { n: '100%', l: 'Verificados SIS' },
        ].map(s => (
          <div key={s.l} style={lS.statItem}>
            <div style={lS.statNum}>{s.n}</div>
            <div style={lS.statLabel}>{s.l}</div>
          </div>
        ))}
      </section>

      {/* ── 3. PARA QUIÉN ── */}
      <section style={lS.section}>
        <div style={lS.sectionInner}>
          <div style={lS.sectionLabel}>¿Para quién es Lokat?</div>
          <h2 style={{...lS.sectionTitle, fontSize: isMobile ? 26 : 40}}>Conectamos a quienes cuidan la salud<br />con los espacios que necesitan</h2>
          <div style={{...lS.audienceGrid, gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr'}}>
            <div style={lS.audienceCard} onClick={() => onNavigate('search')}>
              <div style={lS.audienceIconBg}>
                <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#0984e3" strokeWidth="1.8"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
              </div>
              <h3 style={lS.audienceTitle}>Profesionales de la Salud</h3>
              <p style={lS.audiencePara}>
                Médicos, dentistas, kinesiólogos, psicólogos y otros profesionales que necesitan un espacio clínico equipado para atender a sus pacientes — sin los costos fijos de arrendar una consulta completa.
              </p>
              <ul style={lS.audienceList}>
                {['Reserva por hora, sin contratos largos','Equipamiento médico incluido','Verificación SIS automática','Paga solo lo que usas'].map(i => (
                  <li key={i} style={lS.audienceItem}>
                    <span style={lS.audienceCheck}>✓</span>{i}
                  </li>
                ))}
              </ul>
              <button style={lS.audienceBtn}>Buscar boxes →</button>
            </div>

            <div style={lS.audienceCard} onClick={() => onNavigate('owner')}>
              <div style={{...lS.audienceIconBg, background:'#e8f8f1'}}>
                <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#00b894" strokeWidth="1.8"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
              </div>
              <h3 style={{...lS.audienceTitle, color:'#00b894'}}>Propietarios de Espacios Médicos</h3>
              <p style={lS.audiencePara}>
                Clínicas, centros médicos y propietarios de consultas que tienen boxes subutilizados. Con Lokat los publicas en minutos y empiezas a generar ingresos de los espacios que estaban ociosos.
              </p>
              <ul style={lS.audienceList}>
                {['Publica tu box en menos de 5 minutos','Gestiona disponibilidad en tiempo real','Recibe pagos automáticos vía Stripe','Panel de control con métricas en vivo'].map(i => (
                  <li key={i} style={lS.audienceItem}>
                    <span style={{...lS.audienceCheck, color:'#00b894'}}>✓</span>{i}
                  </li>
                ))}
              </ul>
              <button style={{...lS.audienceBtn, background:'#00b894'}}>Publicar mi espacio →</button>
            </div>
          </div>
        </div>
      </section>

      {/* ── 4. 3 CLICS ── */}
      <section style={{...lS.section, background:'#f0f7ff'}}>
        <div style={lS.sectionInner}>
          <div style={lS.sectionLabel}>Reserva sin fricción</div>
          <h2 style={{...lS.sectionTitle, fontSize: isMobile ? 26 : 40}}>Tu box en 3 clics</h2>
          <p style={lS.sectionSub}>Diseñado para que los profesionales de la salud reserven en segundos, no en minutos.</p>
          <div style={{...lS.stepsGrid, gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)'}}>
            {[
              {
                n:'1', icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#0984e3" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>,
                title:'Busca tu box', desc:'Filtra por especialidad, ubicación y equipamiento. Ve disponibilidad en tiempo real.',
                screen: 'search'
              },
              {
                n:'2', icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#0984e3" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>,
                title:'Elige tu horario', desc:'Selecciona el bloque horario que necesitas. Los buffers de higiene se calculan automáticamente.',
                screen: 'slots'
              },
              {
                n:'3', icon: <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#0984e3" strokeWidth="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>,
                title:'Confirma y listo', desc:'Pago seguro, confirmación instantánea y código de acceso. Nos vemos en el box.',
                screen: 'confirm'
              },
            ].map(step => (
              <div key={step.n} style={lS.stepCard}>
                <div style={lS.stepNumRow}>
                  <div style={lS.stepNum}>{step.n}</div>
                  <div style={lS.stepIconBox}>{step.icon}</div>
                </div>
                <h3 style={lS.stepTitle}>{step.title}</h3>
                <p style={lS.stepDesc}>{step.desc}</p>
              {/* Todos los steps usan marco de dispositivo */}
                <div style={lS.stepDeviceWrap}>
                  <div style={lS.stepDevice}>
                    <div style={lS.stepDeviceNotch}></div>
                    <div style={lS.stepDeviceScreen}>
                      <div style={{flex:1, overflow:'hidden'}}>
                        {step.screen === 'search' && <AppScreenSearch />}
                        {step.screen === 'slots'  && <AppScreenSlots />}
                        {step.screen === 'confirm' && (
                          <div style={{background:'#F8F9FA', padding:12, height:'100%'}}>
                            <div style={{background:'#fff', borderRadius:10, padding:12, border:'1px solid #e9ecef', textAlign:'center'}}>
                              <div style={{width:44, height:44, background:'#0984e3', borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:800, fontSize:20, margin:'8px auto 10px'}}>✓</div>
                              <div style={{fontSize:12, fontWeight:800, marginBottom:4}}>¡Reserva confirmada!</div>
                              <div style={{fontSize:10, color:'#636e72', marginBottom:10}}>Box Dental · Las Condes</div>
                              {[['Fecha','Lunes 2 jun'],['Horario','10:00 – 11:00'],['Total','$9.350']].map(([k,v]) => (
                                <div key={k} style={{display:'flex', justifyContent:'space-between', fontSize:10, padding:'5px 0', borderBottom:'1px solid #f0f4f8'}}>
                                  <span style={{color:'#636e72'}}>{k}</span>
                                  <span style={{fontWeight:600}}>{v}</span>
                                </div>
                              ))}
                              <div style={{fontFamily:'monospace', background:'#e3f0fc', borderRadius:6, padding:'5px 10px', fontSize:11, fontWeight:700, color:'#0984e3', marginTop:10}}>LKT-A3K9F2</div>
                            </div>
                          </div>
                        )}
                      </div>
                    </div>
                    <div style={lS.stepDeviceHome}></div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── 5. LA PLATAFORMA — Desktop mockup + owner features ── */}
      <section style={lS.section}>
        <div style={lS.sectionInner}>
          <div style={lS.sectionLabel}>La plataforma</div>
          <h2 style={{...lS.sectionTitle, fontSize: isMobile ? 26 : 40}}>Todo lo que necesitas,<br />en un solo lugar</h2>
          <p style={lS.sectionSub}>El panel de propietarios te da control total sobre tus boxes, tus ingresos y tu agenda — desde cualquier dispositivo.</p>

          {/* DESKTOP MOCKUP */}
          {!isMobile && <div style={lS.desktopMockup}>
            {/* Browser chrome */}
            <div style={lS.browserBar}>
              <div style={lS.browserDots}>
                <span style={{...lS.browserDot, background:'#ff5f57'}}></span>
                <span style={{...lS.browserDot, background:'#ffbd2e'}}></span>
                <span style={{...lS.browserDot, background:'#28c840'}}></span>
              </div>
              <div style={lS.browserUrl}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#adb5bd" strokeWidth="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                app.lokat.cl/panel
              </div>
              <div style={{width:60}}></div>
            </div>
            {/* Dashboard screen */}
            <div style={lS.browserScreen}>
              {/* Sidebar */}
              <div style={lS.dbSidebar}>
                <div style={lS.dbSidebarLogo}>
                  <div style={{width:24, height:24, background:'#0984e3', borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:800, fontSize:12}}>L</div>
                  <span style={{fontSize:13, fontWeight:700, color:'#fff'}}>lokat</span>
                </div>
                {[
                  {icon:'▦', label:'Dashboard', active:true},
                  {icon:'⊞', label:'Mis boxes', active:false},
                  {icon:'📅', label:'Reservas', active:false},
                  {icon:'💳', label:'Pagos', active:false},
                  {icon:'⚙️', label:'Ajustes', active:false},
                ].map(item => (
                  <div key={item.label} style={{...lS.dbSidebarItem, ...(item.active ? lS.dbSidebarItemActive : {})}}>
                    <span style={{fontSize:14}}>{item.icon}</span>
                    <span style={{fontSize:12}}>{item.label}</span>
                  </div>
                ))}
              </div>
              {/* Main content */}
              <div style={lS.dbMain}>
                {/* Header */}
                <div style={lS.dbHeader}>
                  <div>
                    <div style={{fontSize:14, fontWeight:700, color:'#2D3436'}}>Buenos días, Clínica Sonrisa 👋</div>
                    <div style={{fontSize:11, color:'#adb5bd'}}>Mayo 2026 · 3 boxes activos</div>
                  </div>
                  <div style={{display:'flex', gap:8, alignItems:'center'}}>
                    <div style={{width:8, height:8, borderRadius:'50%', background:'#2ecc71', animation:'pulse 1.5s infinite'}}></div>
                    <span style={{fontSize:11, color:'#2ecc71', fontWeight:600}}>En vivo</span>
                  </div>
                </div>
                {/* KPI row */}
                <div style={lS.dbKpiRow}>
                  {[
                    {label:'Ingresos Mayo', value:'$225.000', delta:'+18%', color:'#0984e3'},
                    {label:'Reservas activas', value:'12', delta:'+3 hoy', color:'#00b894'},
                    {label:'Ocupación', value:'78%', delta:'↑ vs mes ant.', color:'#6c5ce7'},
                    {label:'Rating promedio', value:'4.8★', delta:'124 reseñas', color:'#fd79a8'},
                  ].map(k => (
                    <div key={k.label} style={lS.dbKpiCard}>
                      <div style={{fontSize:10, color:'#adb5bd', marginBottom:4}}>{k.label}</div>
                      <div style={{fontSize:18, fontWeight:800, color:k.color, marginBottom:2}}>{k.value}</div>
                      <div style={{fontSize:10, color:'#636e72'}}>{k.delta}</div>
                    </div>
                  ))}
                </div>
                {/* Chart + boxes */}
                <div style={{display:'flex', gap:12}}>
                  {/* Mini chart */}
                  <div style={{flex:2, background:'#fff', borderRadius:10, padding:12, border:'1px solid #e9ecef'}}>
                    <div style={{fontSize:11, fontWeight:700, marginBottom:8, color:'#2D3436'}}>Ingresos diarios</div>
                    <div style={{display:'flex', alignItems:'flex-end', gap:4, height:48}}>
                      {[30,55,40,70,60,90,75,100,85,65,95,80].map((h,i) => (
                        <div key={i} style={{flex:1, background: i===11?'#0984e3':'#e3f0fc', borderRadius:'2px 2px 0 0', height:`${h}%`}}></div>
                      ))}
                    </div>
                    <div style={{display:'flex', justifyContent:'space-between', marginTop:4}}>
                      {['23 Abr','','','','','','','','','','','2 May'].map((l,i) => (
                        <div key={i} style={{fontSize:8, color:'#adb5bd'}}>{l}</div>
                      ))}
                    </div>
                  </div>
                  {/* Box list */}
                  <div style={{flex:1, background:'#fff', borderRadius:10, padding:12, border:'1px solid #e9ecef'}}>
                    <div style={{fontSize:11, fontWeight:700, marginBottom:8, color:'#2D3436'}}>Mis boxes</div>
                    {[
                      {name:'Box Dental 1', status:'open'},
                      {name:'Box Dental 2', status:'blocked'},
                      {name:'Box Kine', status:'open'},
                    ].map(b => (
                      <div key={b.name} style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'5px 0', borderBottom:'1px solid #f0f4f8'}}>
                        <span style={{fontSize:10, fontWeight:600}}>{b.name}</span>
                        <div style={{width:24, height:13, borderRadius:7, background:b.status==='open'?'#0984e3':'#dee2e6', position:'relative'}}>
                          <div style={{position:'absolute', top:1.5, width:10, height:10, borderRadius:'50%', background:'#fff', left:b.status==='open'?12:2}}></div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>}

          {/* OWNER FEATURES GRID */}
          <div style={{...lS.ownerFeaturesGrid, gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)'}}>
            {[
              { icon:'📊', title:'Ingresos en tiempo real', desc:'Monitorea tus ganancias con un dashboard en vivo. Ve cuánto genera cada box por día, semana y mes.' },
              { icon:'🗓️', title:'Gestión de disponibilidad', desc:'Activa o bloquea tus boxes con un toggle. Configura horarios recurrentes y bloqueos por mantenimiento.' },
              { icon:'📸', title:'Publica en minutos', desc:'Sube fotos, describe el equipamiento y fija tu precio por hora. Tu box aparece en búsquedas de inmediato.' },
              { icon:'💳', title:'Pagos automáticos vía Stripe', desc:'Recibe el pago directamente en tu cuenta bancaria. Sin facturación manual, sin cobros atrasados.' },
              { icon:'🔔', title:'Notificaciones instantáneas', desc:'Recibe alertas cuando alguien reserva, cancela o deja una reseña. Siempre al tanto de tu negocio.' },
              { icon:'⭐', title:'Reseñas verificadas', desc:'Los profesionales califican tu espacio tras cada uso. Más reseñas positivas, más visibilidad en búsquedas.' },
            ].map(f => (
              <div key={f.title} style={lS.ownerFeatureCard}>
                <div style={lS.ownerFeatureIcon}>{f.icon}</div>
                <div style={lS.ownerFeatureTitle}>{f.title}</div>
                <div style={lS.ownerFeatureDesc}>{f.desc}</div>
              </div>
            ))}
          </div>

          <div style={{textAlign:'center', marginTop:40}}>
            <button style={lS.ownerCta} onClick={() => onNavigate('owner')}>Ver panel de propietarios →</button>
          </div>
        </div>
      </section>

      {/* ── 6. DUAL CTA ── */}
      <section style={{...lS.section, background:'#f0f7ff', paddingTop:40, paddingBottom:40}}>
        <div style={{...lS.sectionInner, maxWidth:900}}>
          <div style={{...lS.dualCta, flexDirection: isMobile ? 'column' : 'row'}}>
            <div style={lS.ctaCard} onClick={() => onNavigate('search')}>
              <div style={lS.ctaIcon}>
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#0984e3" strokeWidth="1.8"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
              </div>
              <div>
                <div style={lS.ctaTitle}>Soy Profesional de la Salud</div>
                <div style={lS.ctaSub}>Encuentra y reserva tu box en 3 clics. Verificación SIS automática.</div>
              </div>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0984e3" strokeWidth="2"><path d="m9 18 6-6-6-6"/></svg>
            </div>
            <div style={lS.ctaDividerV} />
            <div style={lS.ctaCard} onClick={() => onNavigate('owner')}>
              <div style={{...lS.ctaIcon, background:'#e8f8f1'}}>
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#00b894" strokeWidth="1.8"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
              </div>
              <div>
                <div style={lS.ctaTitle}>Tengo un espacio médico</div>
                <div style={lS.ctaSub}>Auto-monetiza tu box inactivo. Conecta Stripe en minutos.</div>
              </div>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0984e3" strokeWidth="2"><path d="m9 18 6-6-6-6"/></svg>
            </div>
          </div>
        </div>
      </section>

      {/* ── 7. APP DOWNLOAD ── */}
      <section style={lS.appSection}>
        <div style={{...lS.appSectionInner, flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 32 : 60}}>
          <div style={lS.appTextSide}>
            <div style={lS.sectionLabelLight}>Descarga la app</div>
            <h2 style={lS.appTitle}>Lokat en tu bolsillo</h2>
            <p style={lS.appSub}>
              Reserva boxes, gestiona tus ingresos y recibe notificaciones en tiempo real desde tu smartphone. Disponible para iOS y Android.
            </p>
            <div style={lS.appBtns}>
              <button style={lS.appStoreBtn}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
                <div style={lS.appBtnText}>
                  <span style={lS.appBtnSub}>Descargar en</span>
                  <span style={lS.appBtnTitle}>App Store</span>
                </div>
              </button>
              <button style={lS.appStoreBtn}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M3.18 23.76a2 2 0 0 0 2.74.73l9.38-5.42-2.63-2.63-9.49 7.32Z" fill="#EA4335"/><path d="M20.82 10.26 17.5 8.38l-2.95 2.95 2.95 2.95 3.35-1.93a2 2 0 0 0 0-3.09Z" fill="#FBBC05"/><path d="m3.18.24 9.49 7.32 2.63-2.63L5.92-.49A2 2 0 0 0 3.18.24Z" fill="#4285F4"/><path d="M2 1.27A2 2 0 0 0 1 3v18a2 2 0 0 0 1 1.73l.13.07 10.07-10.07v-.24L2.13 1.2 2 1.27Z" fill="#34A853"/></svg>
                <div style={lS.appBtnText}>
                  <span style={lS.appBtnSub}>Disponible en</span>
                  <span style={lS.appBtnTitle}>Google Play</span>
                </div>
              </button>
            </div>
            <div style={lS.appRating}>
              {'★★★★★'} <strong>4.9</strong> · +2.400 reseñas
            </div>
          </div>
          {!isMobile && <div style={lS.appPhoneWrap}>
            <div style={lS.appPhoneOuter}>
              <div style={lS.appPhoneNotch}></div>
              <div style={lS.appPhoneScreen}>
                <AppScreenSearch />
              </div>
              <div style={lS.appPhoneHome}></div>
            </div>
            <div style={{...lS.appPhoneOuter, transform:'scale(0.88) translateX(40px) rotate(6deg)', opacity:0.7, zIndex:0}}>
              <div style={lS.appPhoneNotch}></div>
              <div style={lS.appPhoneScreen}>
                <AppScreenOwner />
              </div>
              <div style={lS.appPhoneHome}></div>
            </div>
          </div>}
        </div>
      </section>

      {/* ── FOOTER ── */}
      <Footer onNavigate={onNavigate} />
    </div>
  );
};

// ── STYLES ────────────────────────────────────────────────────────────────────
const lS = {
  root: { minHeight:'100vh', background:'#F8F9FA', fontFamily:"'Helvetica Neue',Helvetica,Arial,sans-serif", color:'#2D3436' },
  // Nav
  nav: { background:'#fff', borderBottom:'1px solid #e9ecef', position:'sticky', top:0, zIndex:100 },
  navInner: { maxWidth:1200, margin:'0 auto', padding:'0 24px', height:64, display:'flex', alignItems:'center', justifyContent:'space-between' },
  logo: { display:'flex', alignItems:'center', gap:8 },
  logoMark: { width:32, height:32, background:'#0984e3', borderRadius:8, display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:800, fontSize:16, lineHeight:'32px', textAlign:'center', padding:'0 8px' },
  logoText: { fontSize:20, fontWeight:700, color:'#2D3436', letterSpacing:'-0.5px' },
  navLinks: { display:'flex', alignItems:'center', gap:8 },
  navLink: { background:'none', border:'none', color:'#636e72', fontSize:14, fontWeight:500, cursor:'pointer', padding:'8px 12px', borderRadius:6, fontFamily:'inherit' },
  navCta: { background:'#0984e3', color:'#fff', border:'none', borderRadius:8, padding:'8px 18px', fontSize:14, fontWeight:600, cursor:'pointer', fontFamily:'inherit' },
  // Hero
  hero: { maxWidth:1200, margin:'0 auto', padding:'80px 24px 80px', display:'flex', alignItems:'center', gap:60 },
  heroContent: { flex:1 },
  badge: { display:'inline-flex', alignItems:'center', gap:6, background:'#e3f0fc', color:'#0984e3', borderRadius:20, padding:'6px 14px', fontSize:13, fontWeight:500, marginBottom:24 },
  heroTitle: { fontSize:52, fontWeight:800, lineHeight:1.15, margin:'0 0 20px', color:'#2D3436', letterSpacing:'-1.5px' },
  heroAccent: { color:'#0984e3' },
  heroSub: { fontSize:18, color:'#636e72', lineHeight:1.6, marginBottom:36, maxWidth:480 },
  searchBar: { background:'#fff', borderRadius:14, boxShadow:'0 4px 24px rgba(9,132,227,0.1)', display:'flex', alignItems:'center', padding:'8px 8px 8px 16px', marginBottom:20, border:'1px solid #e9ecef' },
  searchField: { display:'flex', alignItems:'center', gap:10, flex:1, padding:'8px 12px' },
  searchInput: { border:'none', outline:'none', fontSize:15, color:'#2D3436', background:'transparent', flex:1, fontFamily:'inherit' },
  searchDivider: { width:1, height:28, background:'#e9ecef' },
  searchBtn: { background:'#0984e3', color:'#fff', border:'none', borderRadius:10, padding:'12px 24px', fontSize:15, fontWeight:600, cursor:'pointer', whiteSpace:'nowrap', fontFamily:'inherit' },
  quickFilters: { display:'flex', gap:8, flexWrap:'wrap' },
  filterTag: { background:'#fff', border:'1px solid #dee2e6', borderRadius:20, padding:'6px 14px', fontSize:13, color:'#636e72', cursor:'pointer', fontFamily:'inherit' },
  heroVisual: { position:'relative', flex:'0 0 360px', paddingBottom:32 },
  heroCard: { background:'#fff', borderRadius:18, padding:24, boxShadow:'0 12px 48px rgba(9,132,227,0.12)', border:'1px solid #e9ecef' },
  heroCardHeader: { display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 },
  heroCardBadge: { background:'#d4edda', color:'#155724', borderRadius:20, padding:'4px 10px', fontSize:12, fontWeight:600 },
  heroCardPrice: { fontSize:20, fontWeight:800, color:'#0984e3' },
  heroCardTitle: { fontSize:16, fontWeight:700, marginBottom:12 },
  heroCardEquip: { display:'flex', gap:6, flexWrap:'wrap', marginBottom:16 },
  equipTag: { background:'#f0f4f8', borderRadius:6, padding:'4px 8px', fontSize:12, color:'#2D3436' },
  heroCardSlots: { display:'flex', gap:8, marginBottom:16 },
  slot: { flex:1, background:'#f0f4f8', borderRadius:8, padding:'8px 4px', fontSize:12, textAlign:'center', color:'#636e72' },
  slotActive: { background:'#0984e3', color:'#fff', fontWeight:700 },
  heroCardBtn: { width:'100%', background:'#0984e3', color:'#fff', border:'none', borderRadius:10, padding:'12px', fontSize:15, fontWeight:600, cursor:'pointer', fontFamily:'inherit' },
  floatStat: { position:'absolute', background:'#fff', borderRadius:12, padding:'12px 16px', boxShadow:'0 8px 24px rgba(0,0,0,0.08)', border:'1px solid #e9ecef' },
  floatStatNum: { fontSize:20, fontWeight:800, color:'#0984e3' },
  floatStatLabel: { fontSize:12, color:'#636e72' },
  // Stats bar
  statsBar: { background:'#0984e3', padding:'40px 24px', display:'flex', justifyContent:'center', gap:80 },
  statItem: { textAlign:'center' },
  statNum: { fontSize:32, fontWeight:800, color:'#fff', marginBottom:4 },
  statLabel: { fontSize:14, color:'rgba(255,255,255,0.75)' },
  // Section base
  section: { padding:'80px 24px', background:'#F8F9FA' },
  sectionInner: { maxWidth:1200, margin:'0 auto' },
  sectionLabel: { display:'inline-block', background:'#e3f0fc', color:'#0984e3', borderRadius:20, padding:'5px 14px', fontSize:12, fontWeight:700, letterSpacing:0.5, textTransform:'uppercase', marginBottom:16 },
  sectionLabelLight: { display:'inline-block', background:'rgba(255,255,255,0.15)', color:'rgba(255,255,255,0.9)', borderRadius:20, padding:'5px 14px', fontSize:12, fontWeight:700, letterSpacing:0.5, textTransform:'uppercase', marginBottom:16 },
  sectionTitle: { fontSize:40, fontWeight:800, letterSpacing:'-1px', marginBottom:16, lineHeight:1.2, color:'#2D3436' },
  sectionSub: { fontSize:17, color:'#636e72', maxWidth:560, lineHeight:1.6, marginBottom:48 },
  // Audience
  audienceGrid: { display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, marginTop:40 },
  audienceCard: { background:'#fff', borderRadius:20, padding:36, border:'1px solid #e9ecef', boxShadow:'0 4px 24px rgba(0,0,0,0.04)', cursor:'pointer' },
  audienceIconBg: { width:68, height:68, background:'#e3f0fc', borderRadius:18, display:'flex', alignItems:'center', justifyContent:'center', marginBottom:20 },
  audienceTitle: { fontSize:22, fontWeight:800, marginBottom:12, color:'#0984e3' },
  audiencePara: { fontSize:15, color:'#636e72', lineHeight:1.7, marginBottom:20 },
  audienceList: { listStyle:'none', padding:0, margin:'0 0 24px', display:'flex', flexDirection:'column', gap:8 },
  audienceItem: { display:'flex', alignItems:'flex-start', gap:10, fontSize:14, color:'#2D3436' },
  audienceCheck: { color:'#0984e3', fontWeight:700, flexShrink:0, marginTop:1 },
  audienceBtn: { background:'#0984e3', color:'#fff', border:'none', borderRadius:10, padding:'12px 24px', fontSize:14, fontWeight:600, cursor:'pointer', fontFamily:'inherit' },
  // Steps
  stepsGrid: { display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24 },
  stepCard: { background:'#fff', borderRadius:20, padding:28, border:'1px solid #e9ecef', boxShadow:'0 4px 24px rgba(0,0,0,0.04)', display:'flex', flexDirection:'column' },
  stepNumRow: { display:'flex', alignItems:'center', gap:12, marginBottom:16 },
  stepNum: { width:36, height:36, background:'#0984e3', borderRadius:10, display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:800, fontSize:18, flexShrink:0 },
  stepIconBox: { width:44, height:44, background:'#e3f0fc', borderRadius:12, display:'flex', alignItems:'center', justifyContent:'center' },
  stepTitle: { fontSize:18, fontWeight:800, marginBottom:8 },
  stepDesc: { fontSize:14, color:'#636e72', lineHeight:1.6, marginBottom:20 },
  stepScreen: { borderRadius:10, overflow:'hidden', border:'1px solid #e9ecef', boxShadow:'0 4px 16px rgba(0,0,0,0.06)' },
  stepDeviceWrap: { display:'flex', justifyContent:'center', marginTop:8 },
  stepDevice: { width:200, background:'#1a1a2e', borderRadius:36, padding:'14px 10px 10px', boxShadow:'0 20px 60px rgba(0,0,0,0.18)', flexShrink:0 },
  stepDeviceNotch: { width:60, height:16, background:'#1a1a2e', borderRadius:8, margin:'0 auto 6px' },
  stepDeviceScreen: { borderRadius:24, overflow:'hidden', background:'#f8f9fa', height:360, display:'flex', flexDirection:'column' },
  stepDeviceHome: { width:40, height:4, background:'rgba(255,255,255,0.3)', borderRadius:2, margin:'8px auto 0' },
  stepConfirmVisual: { background:'#d4edda', borderRadius:14, padding:'24px', textAlign:'center' },
  stepConfirmIcon: { width:52, height:52, background:'#0984e3', borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff', fontWeight:800, fontSize:24, margin:'0 auto 12px' },
  stepConfirmText: { fontSize:16, fontWeight:700, color:'#155724', marginBottom:8 },
  stepConfirmCode: { fontFamily:'monospace', background:'#fff', borderRadius:8, padding:'6px 14px', display:'inline-block', fontSize:14, fontWeight:600, color:'#0984e3', letterSpacing:1 },
  // Screenshots
  screenshotsGrid: { display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:40, marginTop:40 },
  screenshotItem: { display:'flex', flexDirection:'column', alignItems:'center', gap:16 },
  screenshotDevice: { width:200, background:'#1a1a2e', borderRadius:36, padding:'12px 8px 8px', boxShadow:'0 20px 60px rgba(0,0,0,0.2)', position:'relative' },
  deviceNotch: { width:60, height:16, background:'#1a1a2e', borderRadius:8, margin:'0 auto 6px', zIndex:1 },
  deviceScreen: { borderRadius:24, overflow:'hidden', background:'#f8f9fa' },
  deviceHome: { width:40, height:4, background:'rgba(255,255,255,0.3)', borderRadius:2, margin:'8px auto 0' },
  screenshotCaption: { textAlign:'center', display:'flex', flexDirection:'column', gap:4 },
  // Desktop mockup
  desktopMockup: { background:'#1a1a2e', borderRadius:20, overflow:'hidden', boxShadow:'0 24px 80px rgba(0,0,0,0.18)', marginBottom:60, border:'1px solid #2d2d4e' },
  browserBar: { background:'#2d2d4e', padding:'10px 16px', display:'flex', alignItems:'center', gap:12 },
  browserDots: { display:'flex', gap:6 },
  browserDot: { width:10, height:10, borderRadius:'50%' },
  browserUrl: { flex:1, background:'rgba(255,255,255,0.07)', borderRadius:6, padding:'5px 12px', fontSize:11, color:'#adb5bd', display:'flex', alignItems:'center', gap:6, maxWidth:320, margin:'0 auto' },
  browserScreen: { display:'flex', minHeight:340 },
  dbSidebar: { width:140, background:'#0984e3', padding:'16px 10px', display:'flex', flexDirection:'column', gap:4 },
  dbSidebarLogo: { display:'flex', alignItems:'center', gap:8, marginBottom:16, padding:'0 4px' },
  dbSidebarItem: { display:'flex', alignItems:'center', gap:8, padding:'8px 10px', borderRadius:8, color:'rgba(255,255,255,0.7)', fontSize:12, cursor:'pointer' },
  dbSidebarItemActive: { background:'rgba(255,255,255,0.15)', color:'#fff', fontWeight:600 },
  dbMain: { flex:1, background:'#F8F9FA', padding:16, display:'flex', flexDirection:'column', gap:12 },
  dbHeader: { display:'flex', justifyContent:'space-between', alignItems:'center', background:'#fff', borderRadius:10, padding:'10px 14px', border:'1px solid #e9ecef' },
  dbKpiRow: { display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:10 },
  dbKpiCard: { background:'#fff', borderRadius:10, padding:'10px 12px', border:'1px solid #e9ecef' },
  // Owner features
  ownerFeaturesGrid: { display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24, marginTop:40 },
  ownerFeatureCard: { background:'#fff', borderRadius:16, padding:24, border:'1px solid #e9ecef', boxShadow:'0 2px 12px rgba(0,0,0,0.04)' },
  ownerFeatureIcon: { fontSize:28, marginBottom:12 },
  ownerFeatureTitle: { fontSize:16, fontWeight:700, marginBottom:8, color:'#2D3436' },
  ownerFeatureDesc: { fontSize:14, color:'#636e72', lineHeight:1.6 },
  ownerCta: { background:'#0984e3', color:'#fff', border:'none', borderRadius:12, padding:'14px 32px', fontSize:16, fontWeight:700, cursor:'pointer', fontFamily:'inherit' },
  deviceNotch: { width:60, height:16, background:'#1a1a2e', borderRadius:8, margin:'0 auto 6px', zIndex:1 },
  deviceScreen: { borderRadius:24, overflow:'hidden', background:'#f8f9fa' },
  deviceHome: { width:40, height:4, background:'rgba(255,255,255,0.3)', borderRadius:2, margin:'8px auto 0' },
  screenshotCaption: { textAlign:'center', display:'flex', flexDirection:'column', gap:4 },
  // Dual CTA
  dualCta: { display:'flex', gap:0 },
  ctaCard: { flex:1, background:'#fff', borderRadius:16, padding:'28px 32px', display:'flex', alignItems:'center', gap:20, cursor:'pointer', border:'1px solid #e9ecef', boxShadow:'0 4px 16px rgba(0,0,0,0.04)' },
  ctaDividerV: { width:24 },
  ctaIcon: { width:56, height:56, background:'#e3f0fc', borderRadius:14, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 },
  ctaTitle: { fontSize:17, fontWeight:700, marginBottom:4 },
  ctaSub: { fontSize:14, color:'#636e72', lineHeight:1.5 },
  // App section
  appSection: { background:'linear-gradient(135deg, #0984e3 0%, #0570c9 60%, #044fa0 100%)', padding:'80px 24px', overflow:'hidden' },
  appSectionInner: { maxWidth:1100, margin:'0 auto', display:'flex', alignItems:'center', gap:60 },
  appTextSide: { flex:1 },
  appTitle: { fontSize:44, fontWeight:800, color:'#fff', letterSpacing:'-1px', marginBottom:16, lineHeight:1.15 },
  appSub: { fontSize:17, color:'rgba(255,255,255,0.8)', lineHeight:1.7, marginBottom:36, maxWidth:440 },
  appBtns: { display:'flex', gap:16, marginBottom:24 },
  appStoreBtn: { display:'flex', alignItems:'center', gap:12, background:'rgba(255,255,255,0.12)', border:'1.5px solid rgba(255,255,255,0.3)', borderRadius:14, padding:'12px 20px', cursor:'pointer', color:'#fff', fontFamily:'inherit', backdropFilter:'blur(10px)' },
  appBtnText: { display:'flex', flexDirection:'column', textAlign:'left' },
  appBtnSub: { fontSize:10, opacity:0.75, fontWeight:400 },
  appBtnTitle: { fontSize:16, fontWeight:700 },
  appRating: { fontSize:14, color:'rgba(255,255,255,0.8)' },
  appPhoneWrap: { position:'relative', flexShrink:0, width:260, height:480, display:'flex', alignItems:'center' },
  appPhoneOuter: { position:'absolute', width:220, background:'#1a1a2e', borderRadius:40, padding:'14px 10px 10px', boxShadow:'0 30px 80px rgba(0,0,0,0.4)', zIndex:1 },
  appPhoneNotch: { width:60, height:16, background:'#1a1a2e', borderRadius:8, margin:'0 auto 6px' },
  appPhoneScreen: { borderRadius:28, overflow:'hidden', background:'#f8f9fa' },
  appPhoneHome: { width:40, height:4, background:'rgba(255,255,255,0.3)', borderRadius:2, margin:'8px auto 0' },
  // Footer
  footer: { background:'#2D3436', padding:'0' },
  footerInner: { maxWidth:1200, margin:'0 auto', padding:'60px 24px 32px' },
  footerTop: { display:'flex', justifyContent:'space-between', gap:48, marginBottom:48 },
  footerBrand: { maxWidth:240 },
  footerLogo: { display:'flex', alignItems:'center', gap:8, marginBottom:12 },
  footerTagline: { fontSize:14, color:'rgba(255,255,255,0.5)', lineHeight:1.6, margin:0 },
  footerLinks: { display:'flex', gap:48 },
  footerCol: { display:'flex', flexDirection:'column', gap:10 },
  footerColTitle: { fontSize:12, fontWeight:700, color:'rgba(255,255,255,0.4)', textTransform:'uppercase', letterSpacing:1, marginBottom:4 },
  footerLink: { background:'none', border:'none', color:'rgba(255,255,255,0.65)', fontSize:14, cursor:'pointer', textAlign:'left', padding:0, fontFamily:'inherit' },
  footerBottom: { borderTop:'1px solid rgba(255,255,255,0.08)', paddingTop:24, display:'flex', justifyContent:'space-between' },
  footerCopy: { fontSize:12, color:'rgba(255,255,255,0.35)', margin:0 },
};

window.LandingPage = LandingPage;