/* global Icon */
const { useState: useStateLND, useEffect: useEffectLND, useRef: useRefLND } = React;

// ──────────────────────────────────────────────────────────────
// Shared primitives — respect the Vividish design system.
// Accent palette: terracotta (primary), navy (ink/accent-2), ochre (--accent-3).
// Typography: Instrument Serif / Fraunces for display, Geist for body, JetBrains Mono for numbers.
// ──────────────────────────────────────────────────────────────

const LND_emailOk = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test((v||'').trim());

const LNDEyebrow = ({ children, color = 'var(--accent)' }) => (
  <div style={{ fontSize:11.5, letterSpacing:'.12em', textTransform:'uppercase', color, fontWeight:600, display:'inline-flex', alignItems:'center', gap:8 }}>
    <span style={{ width:18, height:1, background:color, display:'inline-block' }}/> {children}
  </div>
);

const LNDSection = ({ id, children, style, className = '' }) => (
  <section id={id} className={className} style={{ position:'relative', ...style }}>{children}</section>
);

const LNDContainer = ({ children, wide, style, className = '' }) => (
  <div className={`lnd-container ${className}`} style={{ maxWidth: wide ? 1320 : 1200, margin:'0 auto', padding:'0 32px', ...style }}>{children}</div>
);

// ──────────────────────────────────────────────────────────────
// Modals
// ──────────────────────────────────────────────────────────────
const LNDModal = ({ title, sub, onClose, children, maxWidth = 520 }) => {
  useEffectLND(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [onClose]);
  return (
    <React.Fragment>
      <div onClick={onClose} style={{ position:'fixed', inset:0, background:'rgba(0,0,0,.55)', zIndex:9996, animation:'vv-backdrop-in 140ms ease-out' }}/>
      <div role="dialog" aria-modal="true" style={{
        position:'fixed', top:'50%', left:'50%', transform:'translate(-50%,-50%)', zIndex:9997,
        background:'var(--bg)', color:'var(--ink)', border:'1px solid var(--line)', borderRadius:18,
        boxShadow:'var(--shadow-lg)', width:`calc(100vw - 40px)`, maxWidth, padding:0,
        animation:'vv-confirm-in 160ms ease-out', maxHeight:'calc(100vh - 40px)', overflow:'auto',
      }}>
        <div style={{ padding:'24px 28px 8px', display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:12 }}>
          <div>
            <h2 className="serif" style={{ margin:0, fontSize:28, fontWeight:400, letterSpacing:'-0.01em', lineHeight:1.15 }}>{title}</h2>
            {sub && <p style={{ margin:'8px 0 0', color:'var(--muted)', fontSize:14, lineHeight:1.5 }}>{sub}</p>}
          </div>
          <button onClick={onClose} aria-label="Close" className="btn btn-ghost" style={{ padding:6, borderRadius:8 }}>
            <Icon name="x" size={16}/>
          </button>
        </div>
        <div style={{ padding:'12px 28px 28px' }}>{children}</div>
      </div>
    </React.Fragment>
  );
};

const LNDWatchDemo = ({ onClose }) => {
  const [loaded, setLoaded] = useStateLND(false);
  useEffectLND(() => { const t = setTimeout(()=>setLoaded(true), 900); return ()=>clearTimeout(t); }, []);
  return (
    <LNDModal title="90-second demo" sub="A tour through what Vividish does — from import to service." onClose={onClose} maxWidth={760}>
      {!loaded ? (
        <div style={{ aspectRatio:'16/9', borderRadius:12, overflow:'hidden' }}>
          <window.vv.Skeleton width="100%" height="100%" radius={12}/>
        </div>
      ) : (
        <div style={{ aspectRatio:'16/9', borderRadius:12, overflow:'hidden', background:'var(--ink-fixed)', color:'var(--ink-fixed-on)', position:'relative', display:'grid', placeItems:'center' }}>
          <div style={{ position:'absolute', inset:0, background:'linear-gradient(135deg, rgba(199,85,45,.35), rgba(232,177,75,.22))' }}/>
          <div style={{ position:'relative', textAlign:'center' }}>
            <div style={{ width:76, height:76, borderRadius:999, background:'rgba(255,255,255,.14)', display:'grid', placeItems:'center', margin:'0 auto', border:'1px solid rgba(255,255,255,.22)' }}>
              <Icon name="play" size={30}/>
            </div>
            <div style={{ marginTop:16, fontSize:14, opacity:.8, fontFamily:'JetBrains Mono' }}>vividish_tour.mp4 · 01:28</div>
          </div>
        </div>
      )}
      <div style={{ display:'flex', justifyContent:'flex-end', marginTop:18 }}>
        <button className="btn btn-ghost" onClick={onClose}>Close</button>
      </div>
    </LNDModal>
  );
};

const LNDContactModal = ({ onClose }) => {
  const [form, setForm] = useStateLND({ name:'', email:'', venue:'Restaurant', msg:'' });
  const [errs, setErrs] = useStateLND({});
  const [submitting, setSubmitting] = useStateLND(false);
  const submit = async () => {
    const e = {};
    if (!form.name.trim()) e.name = 'Please add your name';
    if (!LND_emailOk(form.email)) e.email = 'Enter a valid email';
    setErrs(e);
    if (Object.keys(e).length) return;
    setSubmitting(true);
    await new Promise(r => setTimeout(r, 500));
    setSubmitting(false);
    onClose();
    if (window.vv) window.vv.toast('Thanks — we\'ll be in touch within a business day.', { variant:'success' });
  };
  const upd = (k, v) => { setForm(f => ({ ...f, [k]: v })); setErrs(x => ({ ...x, [k]: undefined })); };
  return (
    <LNDModal title="Talk to sales" sub="Multi-location? Enterprise-grade needs? Write us — we reply within one business day." onClose={onClose}>
      <div style={{ display:'grid', gap:12 }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
          <LNDField label="Your name" error={errs.name}>
            <input className="input" value={form.name} onChange={e => upd('name', e.target.value)} placeholder="Inés Torres"/>
          </LNDField>
          <LNDField label="Work email" error={errs.email}>
            <input className="input" type="email" value={form.email} onChange={e => upd('email', e.target.value)} placeholder="you@casalupe.es"/>
          </LNDField>
        </div>
        <LNDField label="Venue type">
          <window.vv.Select value={form.venue} onChange={(v) => upd('venue', v)} options={[
            { value:'Café', label:'Café' }, { value:'Restaurant', label:'Restaurant' },
            { value:'Bar', label:'Bar' }, { value:'Bakery', label:'Bakery' },
            { value:'Wine bar', label:'Wine bar' }, { value:'Group', label:'Multi-location group' },
          ]} size="md"/>
        </LNDField>
        <LNDField label="What would you like to know?">
          <textarea className="input" rows={4} value={form.msg} onChange={e => upd('msg', e.target.value)} placeholder="Tell us about your operation."/>
        </LNDField>
      </div>
      <div style={{ display:'flex', justifyContent:'flex-end', gap:10, marginTop:18 }}>
        <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
        <button className="btn btn-accent" disabled={submitting} onClick={submit}>{submitting ? 'Sending…' : 'Send'} <Icon name="arrow-right" size={14}/></button>
      </div>
    </LNDModal>
  );
};

const LNDField = ({ label, error, children }) => (
  <label style={{ display:'flex', flexDirection:'column', gap:6 }}>
    <span style={{ fontSize:11, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--muted)', fontWeight:500 }}>{label}</span>
    {children}
    {error && <span style={{ color:'var(--danger)', fontSize:12 }}>{error}</span>}
  </label>
);

const LNDWaitlist = () => {
  const [email, setEmail] = useStateLND('');
  const [sent, setSent] = useStateLND(false);
  const submit = () => {
    if (!LND_emailOk(email)) return;
    setSent(true);
    if (window.vv) window.vv.toast('On the list — first dispatch ships next Tuesday.', { variant:'success' });
  };
  return (
    <form onSubmit={e => { e.preventDefault(); submit(); }} style={{ display:'flex', gap:8, maxWidth:360 }}>
      <input className="input" value={email} onChange={e => setEmail(e.target.value)} placeholder="you@venue.com" disabled={sent}/>
      <button className="btn btn-accent" disabled={sent} type="submit" style={{ padding:'9px 14px', whiteSpace:'nowrap' }}>{sent ? 'Subscribed ✓' : 'Subscribe'}</button>
    </form>
  );
};

// ──────────────────────────────────────────────────────────────
// Top nav — sticky, blurred, shrinks on scroll
// ──────────────────────────────────────────────────────────────
const LNDSolutionsMenu = ({ go }) => {
  const [open, setOpen] = useStateLND(false);
  const verticals = [
    { id:'cafes',       name:'Cafés',        hint:'Speed-first, tip split, loyalty' },
    { id:'restaurants', name:'Restaurants',  hint:'Reservations, KDS, server analytics' },
    { id:'bars',        name:'Bars',         hint:'Tab pre-auth, happy hour, ID scan' },
    { id:'bakeries',    name:'Bakeries',     hint:'Production schedule, B2B, markdown' },
    { id:'groups',      name:'Multi-location', hint:'Central menu, group rollup, audit' },
  ];
  return (
    <div style={{ position:'relative' }} onMouseEnter={()=>setOpen(true)} onMouseLeave={()=>setOpen(false)}>
      <a style={{ cursor:'pointer', color:'inherit' }}>Solutions ↓</a>
      {open && (
        <div style={{ position:'absolute', top:'100%', left:-16, marginTop:10, background:'var(--bg)', border:'1px solid var(--line)', borderRadius:12, padding:8, minWidth:280, boxShadow:'var(--shadow-lg)', zIndex:100 }}>
          {verticals.map(v => (
            <a key={v.id} onClick={()=>go(v.id)} style={{ display:'block', padding:'10px 12px', borderRadius:8, cursor:'pointer' }}
               onMouseEnter={(e)=>e.currentTarget.style.background='var(--paper-2)'}
               onMouseLeave={(e)=>e.currentTarget.style.background='transparent'}>
              <div style={{ fontSize:14, fontWeight:600, color:'var(--ink)' }}>{v.name}</div>
              <div style={{ fontSize:12, color:'var(--muted)', marginTop:2 }}>{v.hint}</div>
            </a>
          ))}
        </div>
      )}
    </div>
  );
};

const LandingNav = ({ go, onDemo, onFeatures }) => {
  const [scrolled, setScrolled] = useStateLND(false);
  useEffectLND(() => {
    const h = () => setScrolled(window.scrollY > 24);
    const parent = document.querySelector('[data-screen-label="01 Landing"]');
    if (parent) { parent.addEventListener('scroll', h); h(); return () => parent.removeEventListener('scroll', h); }
  }, []);
  return (
    <header style={{
      position:'sticky', top:0, zIndex:50,
      background: scrolled ? 'color-mix(in oklch, var(--bg), transparent 8%)' : 'var(--bg)',
      backdropFilter: scrolled ? 'saturate(160%) blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(160%) blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition:'all .22s ease',
    }}>
      <LNDContainer style={{ padding:`${scrolled ? '12px' : '18px'} 32px`, display:'flex', alignItems:'center', justifyContent:'space-between', transition:'padding .22s ease' }} wide={false}>
        <a onClick={() => go('landing')} className="vv-mark lnd-nav" style={{ fontSize:17, cursor:'pointer' }}><span className="glyph"/> Vividish</a>
        <nav className="lnd-nav-links" style={{ display:'flex', gap:28, fontSize:13.5, color:'var(--ink-2)', position:'relative' }}>
          <a onClick={() => onFeatures()} style={{cursor:'pointer'}}>Product</a>
          <LNDSolutionsMenu go={go}/>
          <a href="#run" style={{cursor:'pointer', color:'inherit', textDecoration:'none'}}>Run service</a>
          <a href="#grow" style={{cursor:'pointer', color:'inherit', textDecoration:'none'}}>Grow</a>
          <a href="#feedback" style={{cursor:'pointer', color:'inherit', textDecoration:'none'}}>Feedback</a>
          <a href="#pricing" style={{cursor:'pointer', color:'inherit', textDecoration:'none'}}>Pricing</a>
        </nav>
        <div style={{ display:'flex', gap:10, alignItems:'center' }}>
          <button className="btn btn-ghost" onClick={() => go('dashboard')}>Sign in</button>
          <button className="btn btn-primary" onClick={() => go('onboarding')}>Start free <Icon name="arrow-right" size={14}/></button>
        </div>
      </LNDContainer>
    </header>
  );
};

// ──────────────────────────────────────────────────────────────
// HERO — bold statement, compound composition (no single mockup)
// ──────────────────────────────────────────────────────────────
const Hero = ({ go, onDemo }) => {
  return (
    <LNDSection style={{ overflow:'hidden' }}>
      <LNDContainer style={{ padding:'72px 32px 48px', position:'relative' }} className="lnd-container lnd-pad-hero">
        {/* Ambient colorwash */}
        <div aria-hidden style={{ position:'absolute', top:-120, right:-120, width:520, height:520, borderRadius:'50%', background:'radial-gradient(circle, var(--accent-wash), transparent 65%)', filter:'blur(10px)', pointerEvents:'none' }}/>
        <div aria-hidden style={{ position:'absolute', bottom:-80, left:-80, width:420, height:420, borderRadius:'50%', background:'radial-gradient(circle, var(--accent-3-wash), transparent 65%)', filter:'blur(10px)', pointerEvents:'none' }}/>
        <div className="lnd-hero-grid" style={{ display:'grid', gridTemplateColumns:'1.08fr 1fr', gap:72, alignItems:'center', position:'relative' }}>
          <div>
            <div style={{ display:'inline-flex', alignItems:'center', gap:8, padding:'6px 12px', borderRadius:999, background:'var(--accent-wash)', color:'var(--accent-ink)', fontSize:12.5, fontWeight:600, marginBottom:24 }}>
              <span style={{ width:6, height:6, borderRadius:999, background:'var(--accent)', animation:'pulse 1.6s ease-in-out infinite' }}/>
              New · AI menu import · live ordering · team scheduling
            </div>
            <h1 className="serif" style={{ fontSize:'clamp(52px, 6.6vw, 88px)', lineHeight:0.98, margin:0, fontWeight:400, letterSpacing:'-0.025em' }}>
              The operating system<br/>
              for <em style={{ fontStyle:'italic', color:'var(--accent)' }}>modern</em> <em style={{ fontStyle:'italic', color:'var(--accent-2)' }}>hospitality.</em>
            </h1>
            <p style={{ fontSize:19, lineHeight:1.52, color:'var(--ink-2)', maxWidth:540, marginTop:24 }}>
              Menu, register, reservations, kitchen, website, scheduling, payroll — one workspace, one source of truth. Built in Europe for the people who run the place, not the people who sell software.
            </p>
            <div style={{ display:'flex', gap:12, marginTop:32, flexWrap:'wrap' }}>
              <button className="btn btn-accent" style={{ padding:'14px 22px', fontSize:15 }} onClick={() => go('onboarding')}>
                Start your workspace <Icon name="arrow-right" size={15}/>
              </button>
              <button className="btn" style={{ padding:'14px 22px', fontSize:15 }} onClick={onDemo}>
                <Icon name="play" size={14}/> Watch 90s demo
              </button>
            </div>
            <div style={{ marginTop:44, display:'flex', gap:40, alignItems:'center', flexWrap:'wrap' }}>
              <div>
                <div style={{ display:'flex' }}>
                  {['#C7552D','#E8B14B','#17224A','#2F7A55','#9A5542'].map((c,i) => (
                    <div key={i} style={{ width:30, height:30, borderRadius:999, background:c, border:'2px solid var(--bg)', marginLeft:i?-9:0 }}/>
                  ))}
                </div>
                <div style={{ marginTop:8, fontSize:12.5, color:'var(--muted)' }}>1,840 venues · 14 countries</div>
              </div>
              <div style={{ height:36, width:1, background:'var(--line)' }}/>
              <div style={{ display:'flex', gap:6, alignItems:'center' }}>
                <span style={{ color:'var(--accent-3)', display:'flex', gap:1 }}>★★★★★</span>
                <span style={{ fontSize:12.5, color:'var(--muted)' }}>4.9 · 412 reviews</span>
              </div>
            </div>
          </div>
          <HeroComposition/>
        </div>
      </LNDContainer>
      <style>{`@keyframes pulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } } @keyframes vv-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }`}</style>
    </LNDSection>
  );
};

// Compound hero visual — three floating product cards
const HeroComposition = () => (
  <div className="lnd-hero-visual" style={{ position:'relative', aspectRatio:'0.95/1', minHeight:480 }}>
    {/* Back card: Menu editor */}
    <div style={{ position:'absolute', inset:'6% 0 8% 4%', background:'var(--paper-2)', borderRadius:24, border:'1px solid var(--line)', overflow:'hidden', boxShadow:'var(--shadow-md)' }}>
      <div style={{ padding:'24px 26px' }}>
        <div style={{ display:'flex', alignItems:'center', gap:8, color:'var(--muted)', fontSize:11.5, fontFamily:'JetBrains Mono' }}>
          <span style={{ width:8, height:8, borderRadius:999, background:'var(--accent)' }}/> menu · v.38 · saturday brunch
        </div>
        <div className="serif" style={{ fontSize:44, lineHeight:1.05, marginTop:16, fontWeight:400, letterSpacing:'-0.02em' }}>
          Saturday's<br/><em style={{ color:'var(--accent)', fontStyle:'italic' }}>Brunch</em> menu
        </div>
        <div style={{ marginTop:18, display:'grid', gap:10 }}>
          {[
            { n:'Avocado toast', p:'€11.00', tag:'popular' },
            { n:'Mushroom benedict', p:'€14.00', tag:null },
            { n:'Pistachio bun', p:'€4.20', tag:'new' },
          ].map((it,i) => (
            <div key={i} style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 12px', background:'var(--bg)', border:'1px solid var(--line)', borderRadius:10 }}>
              <div style={{ width:30, height:30, borderRadius:8, background:'linear-gradient(135deg, var(--accent-soft), var(--accent-3-soft))' }}/>
              <div style={{ flex:1, fontSize:13, fontWeight:500 }}>{it.n}</div>
              {it.tag && <span style={{ fontSize:10, padding:'2px 7px', background:'var(--accent-wash)', color:'var(--accent-ink)', borderRadius:999, fontWeight:600, letterSpacing:'.04em', textTransform:'uppercase' }}>{it.tag}</span>}
              <span className="t-tabular" style={{ fontSize:13, fontWeight:500, color:'var(--ink)' }}>{it.p}</span>
            </div>
          ))}
        </div>
      </div>
    </div>

    {/* Middle card: AI generation */}
    <div style={{ position:'absolute', top:30, right:-20, width:260, background:'var(--bg)', borderRadius:16, padding:18, border:'1px solid var(--line)', boxShadow:'var(--shadow-lg)', animation:'vv-float 4s ease-in-out infinite' }}>
      <div style={{ display:'flex', alignItems:'center', gap:8, fontSize:12, color:'var(--accent)', fontWeight:600 }}>
        <Icon name="sparkle" size={14}/> AI photos
      </div>
      <div style={{ marginTop:12, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:6 }}>
        {[0,1,2,3,4,5].map(i => (
          <div key={i} style={{ aspectRatio:1, borderRadius:8, background: i<4 ? `linear-gradient(${45+i*30}deg, var(--accent-soft), var(--accent-3-soft))` : 'var(--paper-2)', display:'grid', placeItems:'center', overflow:'hidden' }}>
            {i >= 4 && <div style={{ width:6, height:6, borderRadius:999, background:'var(--accent)', animation:'pulse 1.4s ease-in-out infinite' }}/>}
          </div>
        ))}
      </div>
      <div style={{ marginTop:12, height:3, borderRadius:99, background:'var(--line)', overflow:'hidden' }}>
        <div style={{ height:'100%', width:'67%', background:'var(--accent)' }}/>
      </div>
      <div style={{ marginTop:6, display:'flex', justifyContent:'space-between', fontSize:11, color:'var(--muted)', fontFamily:'JetBrains Mono' }}>
        <span>8 of 12 done</span><span>42s</span>
      </div>
    </div>

    {/* Front card: live ticket */}
    <div style={{ position:'absolute', bottom:-18, left:-32, width:266, background:'var(--bg)', borderRadius:16, padding:18, border:'1px solid var(--line)', boxShadow:'var(--shadow-lg)', animation:'vv-float 4s ease-in-out infinite', animationDelay:'1.5s' }}>
      <div style={{ display:'flex', justifyContent:'space-between', fontSize:11, color:'var(--muted)', fontFamily:'JetBrains Mono' }}>
        <span>Table 12 · #0841</span>
        <span style={{ color:'var(--ok)', display:'inline-flex', alignItems:'center', gap:5 }}><span style={{ width:6, height:6, borderRadius:999, background:'var(--ok)' }}/>paid</span>
      </div>
      <div style={{ marginTop:12, display:'flex', flexDirection:'column', gap:7 }}>
        {[['2','Flat white','€7.40'],['1','Pistachio bun','€4.20'],['1','Avocado toast','€11.00']].map(([q,n,p],i)=>(
          <div key={i} style={{ display:'flex', fontSize:13, color:'var(--ink-2)' }}>
            <span style={{ width:20, color:'var(--muted)' }}>{q}</span>
            <span style={{ flex:1 }}>{n}</span>
            <span className="t-tabular" style={{ fontFamily:'JetBrains Mono', fontSize:12.5 }}>{p}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop:12, paddingTop:10, borderTop:'1px solid var(--line)', display:'flex', justifyContent:'space-between', fontSize:14, fontWeight:600 }}>
        <span>Total</span><span className="t-tabular">€22.60</span>
      </div>
    </div>
  </div>
);

// ──────────────────────────────────────────────────────────────
// LOGOS — social proof
// ──────────────────────────────────────────────────────────────
const LogoStrip = () => (
  <div style={{ borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)', padding:'28px 32px', background:'var(--paper-2)' }}>
    <LNDContainer className="lnd-logo-strip" style={{ display:'flex', alignItems:'center', gap:48, justifyContent:'space-between', flexWrap:'wrap', color:'var(--muted)', fontSize:13 }}>
      <span className="eyebrow" style={{ fontSize:11, letterSpacing:'.14em', textTransform:'uppercase', fontWeight:600 }}>Trusted across Europe</span>
      {[
        { n:'Casa Lupe', italic:true }, { n:'Marigold' }, { n:'Paper Moon', italic:true },
        { n:'LOAM' }, { n:'Common Ground', italic:true }, { n:'Little Book' },
      ].map((v,i) => (
        <div key={i} className="serif" style={{ fontSize:22, fontStyle: v.italic?'italic':'normal', fontWeight:500, letterSpacing:'-0.02em', color:'var(--ink-2)' }}>{v.n}</div>
      ))}
    </LNDContainer>
  </div>
);

// ──────────────────────────────────────────────────────────────
// VALUE PROP — before/after
// ──────────────────────────────────────────────────────────────
const Stack = ({ go }) => {
  const tools = [
    { name:'Menu', color:'var(--accent)', icon:'menu-book' },
    { name:'Inventory', color:'var(--accent-2)', icon:'layers' },
    { name:'Register', color:'var(--accent-3)', icon:'register' },
    { name:'Kitchen', color:'var(--accent)', icon:'kitchen' },
    { name:'Reservations', color:'var(--accent-2)', icon:'calendar' },
    { name:'QR ordering', color:'var(--accent-3)', icon:'bag' },
    { name:'Team', color:'var(--accent)', icon:'user' },
    { name:'Payments', color:'var(--accent-2)', icon:'bag' },
    { name:'Analytics', color:'var(--accent-3)', icon:'chart' },
    { name:'Website', color:'var(--accent)', icon:'globe' },
    { name:'AI photos', color:'var(--accent-2)', icon:'sparkle' },
    { name:'Directory', color:'var(--accent-3)', icon:'user' },
  ];
  return (
    <LNDSection style={{ padding:'112px 0 96px', background:'var(--bg)' }} className="lnd-pad-112">
      <LNDContainer className="lnd-container">
        <div className="lnd-grid-2" style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:72, alignItems:'center' }}>
          <div>
            <LNDEyebrow>One platform</LNDEyebrow>
            <h2 className="serif" style={{ fontSize:'clamp(40px, 4.6vw, 64px)', margin:'18px 0 18px', fontWeight:400, letterSpacing:'-0.025em', lineHeight:1.02 }}>
              You were running<br/>
              <em style={{ fontStyle:'italic', color:'var(--muted-2)' }}>seven apps</em> for this.
            </h2>
            <p style={{ fontSize:17, color:'var(--ink-2)', lineHeight:1.55, maxWidth:500, marginTop:0 }}>
              POS, inventory, scheduling, reservations, your QR code, a website, a dashboard somewhere. None of them talk to each other. Every change means five updates.
            </p>
            <p style={{ fontSize:17, color:'var(--ink-2)', lineHeight:1.55, maxWidth:500, marginTop:20 }}>
              Vividish is one workspace. Update your menu and it's live on the website, the QR page, the register, and the kitchen display — all at once. It's the same numbers everywhere, because there are no other numbers.
            </p>
            <div style={{ display:'flex', gap:12, marginTop:32 }}>
              <button className="btn btn-accent" onClick={() => go('onboarding')} style={{ padding:'12px 20px' }}>
                Start your workspace <Icon name="arrow-right" size={14}/>
              </button>
              <button className="btn btn-ghost" onClick={() => { const el=document.getElementById('run'); el && el.scrollIntoView({behavior:'smooth'}); }} style={{ padding:'12px 16px' }}>
                Tour the product
              </button>
            </div>
          </div>

          {/* Tool grid */}
          <div className="lnd-grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:12 }}>
            {tools.map((t,i) => (
              <div key={i} style={{ padding:'18px 14px', background:'var(--paper-2)', border:'1px solid var(--line)', borderRadius:14, display:'flex', flexDirection:'column', gap:10, alignItems:'flex-start' }}>
                <span style={{ width:34, height:34, borderRadius:9, background: t.color, color:'#fff', display:'grid', placeItems:'center' }}>
                  <Icon name={t.icon} size={16}/>
                </span>
                <div style={{ fontSize:13.5, fontWeight:500 }}>{t.name}</div>
                <span style={{ fontSize:10.5, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600 }}>Included</span>
              </div>
            ))}
          </div>
        </div>
      </LNDContainer>
    </LNDSection>
  );
};

// ──────────────────────────────────────────────────────────────
// RUN SERVICE — operator features (Register, KDS, Inventory, Shift Mode)
// ──────────────────────────────────────────────────────────────
const RunService = () => (
  <LNDSection id="run" className="lnd-pad-96" style={{ padding:'96px 0', background:'var(--paper-2)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)' }}>
    <LNDContainer>
      <div style={{ maxWidth:720, marginBottom:56 }}>
        <LNDEyebrow color="var(--accent)">Run service</LNDEyebrow>
        <h2 className="serif" style={{ fontSize:'clamp(36px, 4.2vw, 56px)', margin:'14px 0 14px', fontWeight:400, letterSpacing:'-0.025em', lineHeight:1.02 }}>
          The register that keeps up<br/>
          <em style={{ fontStyle:'italic', color:'var(--muted-2)' }}>with a Saturday rush.</em>
        </h2>
        <p style={{ fontSize:17, color:'var(--ink-2)', lineHeight:1.55 }}>
          A point-of-sale your floor team can actually use. Shift mode locks the full screen to POS. Tickets flow automatically to the kitchen. Out-of-stock items disappear from every screen the moment inventory says so.
        </p>
      </div>

      <div className="lnd-grid-2" style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:24, marginBottom:24 }}>
        {/* Register mockup */}
        <div className="card-paper" style={{ padding:0, overflow:'hidden', border:'1px solid var(--line)', borderRadius:20, background:'var(--bg)' }}>
          <div style={{ padding:'18px 22px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
            <LNDEyebrow color="var(--accent)">Register</LNDEyebrow>
            <div style={{ fontSize:11.5, fontFamily:'JetBrains Mono', color:'var(--muted)' }}>Table 4 · Nora</div>
          </div>
          <div style={{ padding:'18px 22px', display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:20 }}>
            {/* Category grid */}
            <div>
              <div style={{ display:'flex', gap:6, overflow:'hidden', marginBottom:12 }}>
                {['All','Coffee','Brunch','Pastry'].map((c,i) => (
                  <span key={c} style={{ padding:'5px 10px', borderRadius:8, background: i===0?'var(--accent-wash)':'var(--paper-2)', color: i===0?'var(--accent-ink)':'var(--muted)', fontSize:12, fontWeight:500 }}>{c}</span>
                ))}
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:8 }}>
                {[
                  { n:'Flat White', p:'€3.80', g:'linear-gradient(135deg, #D4603A, #E8B14B)' },
                  { n:'Cortado', p:'€3.20', g:'linear-gradient(135deg, #8B5A2B, #D4603A)' },
                  { n:'Iced latte', p:'€4.40', g:'linear-gradient(135deg, #E8B14B, #FBE9DF)' },
                  { n:'Pistachio bun', p:'€4.20', g:'linear-gradient(135deg, #E8B14B, #FFF2D0)' },
                ].map((it,i) => (
                  <div key={i} style={{ padding:10, border:'1px solid var(--line)', borderRadius:10, background:'var(--bg)' }}>
                    <div style={{ aspectRatio:'1.2/1', borderRadius:7, background:it.g, marginBottom:8 }}/>
                    <div style={{ fontSize:12, fontWeight:500, lineHeight:1.2 }}>{it.n}</div>
                    <div style={{ fontSize:11, color:'var(--muted)', marginTop:2, fontFamily:'JetBrains Mono' }}>{it.p}</div>
                  </div>
                ))}
              </div>
            </div>
            {/* Ticket */}
            <div style={{ background:'var(--paper-2)', borderRadius:12, padding:14 }}>
              <div style={{ fontSize:11.5, fontWeight:500, color:'var(--ink-2)', marginBottom:10 }}>2 people · Nora · 22m</div>
              {[
                { n:'Flat White', sub:'Oat milk', q:2, p:'€7.60' },
                { n:'Avocado toast', sub:'+ Egg', q:1, p:'€11.00' },
              ].map((r,i) => (
                <div key={i} style={{ padding:'10px 0', borderTop: i>0 ? '1px solid var(--line)' : '0', display:'flex', alignItems:'center', gap:10 }}>
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:13, fontWeight:500 }}>{r.n}</div>
                    <div style={{ fontSize:11, color:'var(--muted)' }}>{r.sub}</div>
                  </div>
                  <div style={{ fontSize:12, color:'var(--muted)', fontFamily:'JetBrains Mono' }}>×{r.q}</div>
                  <div className="t-tabular" style={{ fontSize:13, fontWeight:500, fontFamily:'JetBrains Mono' }}>{r.p}</div>
                </div>
              ))}
              <div style={{ marginTop:10, paddingTop:10, borderTop:'1px solid var(--line)', display:'flex', justifyContent:'space-between', fontSize:15, fontWeight:600 }}>
                <span>Total</span><span className="t-tabular" style={{ fontFamily:'JetBrains Mono' }}>€20.46</span>
              </div>
            </div>
          </div>
        </div>

        {/* Feature callouts */}
        <div style={{ display:'grid', gap:16 }}>
          {[
            { icon:'lock', t:'Shift mode', s:'Full-screen POS with PIN-protected exit. The iPad can\'t wander off the register no matter what.' },
            { icon:'bell', t:'Adaptive density', s:'Simple view for quiet hours, dense grid for the 12–2 rush. The register reads the clock.' },
            { icon:'layers', t:'Auto-hide out of stock', s:'When inventory hits zero, the item vanishes from every screen — POS, QR, kitchen — until restored.' },
          ].map((f,i) => (
            <div key={i} className="card-paper" style={{ padding:20, border:'1px solid var(--line)', borderRadius:14, background:'var(--bg)', display:'flex', gap:14 }}>
              <span style={{ width:36, height:36, borderRadius:9, background:'var(--accent-wash)', color:'var(--accent-ink)', display:'grid', placeItems:'center', flexShrink:0 }}>
                <Icon name={f.icon} size={16}/>
              </span>
              <div>
                <div style={{ fontSize:15, fontWeight:600, marginBottom:4 }}>{f.t}</div>
                <div style={{ fontSize:13.5, color:'var(--ink-2)', lineHeight:1.5 }}>{f.s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* KDS + Inventory row */}
      <div className="lnd-grid-2" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:24 }}>
        {/* KDS */}
        <div className="card-paper" style={{ padding:'24px 26px', border:'1px solid var(--line)', borderRadius:20, background:'var(--bg)' }}>
          <LNDEyebrow color="var(--accent-2)">Kitchen display</LNDEyebrow>
          <h3 className="serif" style={{ fontSize:28, margin:'12px 0 8px', fontWeight:400, letterSpacing:'-0.02em', lineHeight:1.05 }}>Tickets flow, wait times turn red.</h3>
          <p style={{ fontSize:14, color:'var(--ink-2)', lineHeight:1.55, margin:'0 0 20px' }}>
            Orders land as tickets. Expeditor sees median wait, longest wait, and station load at a glance. Chunky 60-pixel buttons built for greasy thumbs.
          </p>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8 }}>
            {[
              { label:'New', count:2, color:'var(--accent-3)' },
              { label:'Preparing', count:3, color:'var(--accent)' },
              { label:'Ready', count:2, color:'var(--ok)' },
            ].map(c => (
              <div key={c.label} style={{ padding:'10px 12px', background:'var(--paper-2)', borderRadius:10, border:'1px solid var(--line)' }}>
                <div style={{ display:'flex', alignItems:'center', gap:6, fontSize:11.5 }}>
                  <span style={{ width:7, height:7, borderRadius:2, background:c.color }}/>
                  {c.label}
                </div>
                <div className="t-tabular" style={{ fontSize:22, fontWeight:500, marginTop:4, fontFamily:'JetBrains Mono' }}>{c.count}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop:14, padding:'12px 14px', background:'var(--paper-2)', borderRadius:10, border:'1px solid var(--line)' }}>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:11.5, color:'var(--muted)' }}>
              <span style={{ fontFamily:'JetBrains Mono' }}>#408 · Table 6</span>
              <span style={{ color:'var(--warn)', fontFamily:'JetBrains Mono' }}>9:24 wait</span>
            </div>
            <div style={{ marginTop:6, fontSize:13 }}>3× Cod à la brasa · 3× Olive oil cake</div>
          </div>
        </div>

        {/* Inventory */}
        <div className="card-paper" style={{ padding:'24px 26px', border:'1px solid var(--line)', borderRadius:20, background:'var(--bg)' }}>
          <LNDEyebrow color="var(--accent-3)">Inventory</LNDEyebrow>
          <h3 className="serif" style={{ fontSize:28, margin:'12px 0 8px', fontWeight:400, letterSpacing:'-0.02em', lineHeight:1.05 }}>Stock that knows the menu.</h3>
          <p style={{ fontSize:14, color:'var(--ink-2)', lineHeight:1.55, margin:'0 0 20px' }}>
            Ingredients tie to recipes. Sell a burger, the bun, patty, cheese, and sauce all decrement. When stock hits par, the kitchen sees it — and the item auto-hides from the register.
          </p>
          <div style={{ padding:'14px 16px', background:'var(--paper-2)', borderRadius:12, border:'1px solid var(--line)' }}>
            {[
              { n:'Eggs (large)', s:'In stock', on:'60 / 72', color:'var(--ok)' },
              { n:'Lamb shoulder', s:'Low', on:'5.8 / 12', color:'var(--warn)' },
              { n:'Octopus', s:'Out', on:'0 / 4', color:'var(--danger)' },
            ].map((r,i) => (
              <div key={i} style={{ padding:'10px 0', borderTop: i>0 ? '1px solid var(--line)' : '0', display:'flex', alignItems:'center', gap:12 }}>
                <div style={{ flex:1, fontSize:13, fontWeight:500 }}>{r.n}</div>
                <div className="t-tabular" style={{ fontSize:12.5, color:'var(--muted)', fontFamily:'JetBrains Mono' }}>{r.on}</div>
                <span style={{ fontSize:10.5, padding:'2px 8px', borderRadius:99, background: `color-mix(in oklch, ${r.color}, white 86%)`, color: r.color, fontWeight:600 }}>{r.s}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </LNDContainer>
  </LNDSection>
);

// ──────────────────────────────────────────────────────────────
// GROW — reach (Menu studio / AI, QR ordering, website, directory)
// ──────────────────────────────────────────────────────────────
const Grow = () => (
  <LNDSection id="grow" className="lnd-pad-112" style={{ padding:'112px 0' }}>
    <LNDContainer>
      <div style={{ maxWidth:720, marginBottom:56 }}>
        <LNDEyebrow color="var(--accent-2)">Grow the business</LNDEyebrow>
        <h2 className="serif" style={{ fontSize:'clamp(36px, 4.2vw, 56px)', margin:'14px 0 14px', fontWeight:400, letterSpacing:'-0.025em', lineHeight:1.02 }}>
          Meet guests where they already<br/>
          <em style={{ fontStyle:'italic', color:'var(--accent-2)' }}>look for you.</em>
        </h2>
        <p style={{ fontSize:17, color:'var(--ink-2)', lineHeight:1.55 }}>
          A website that isn't a Linktree. QR ordering that completes in under 10 seconds. A directory listing that ranks on Google. All from the same menu you update once.
        </p>
      </div>

      <div className="lnd-grid-2" style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:24, marginBottom:24 }}>
        {/* Menu Studio */}
        <div className="card-paper" style={{ padding:'28px 30px', border:'1px solid var(--line)', borderRadius:20, background:'var(--paper-2)', position:'relative', overflow:'hidden' }}>
          <div style={{ position:'absolute', inset:'auto -40px -40px auto', width:200, height:200, borderRadius:'50%', background:'radial-gradient(circle, var(--accent-wash), transparent 60%)' }}/>
          <LNDEyebrow color="var(--accent)">Menu Studio · AI photos</LNDEyebrow>
          <h3 className="serif" style={{ fontSize:34, margin:'14px 0 12px', fontWeight:400, letterSpacing:'-0.02em', lineHeight:1.02 }}>From PDF to published menu<br/>in four minutes.</h3>
          <p style={{ fontSize:14.5, color:'var(--ink-2)', lineHeight:1.55, margin:'0 0 22px' }}>
            Drop your existing menu. AI reads items, prices, allergens — matched against a library of 140k canonical dishes. Generate photography with the sparkle button. Publish atomically.
          </p>

          {/* Timeline */}
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:12, position:'relative', zIndex:1 }}>
            {[
              { t:'00:00', title:'Drop PDF' },
              { t:'00:45', title:'AI reads' },
              { t:'02:20', title:'Generate photos' },
              { t:'04:00', title:'Go live' },
            ].map((s,i) => (
              <div key={i}>
                <div style={{ fontFamily:'JetBrains Mono', fontSize:11, color:'var(--accent)', fontWeight:500 }}>{s.t}</div>
                <div style={{ marginTop:8, height:2, background:'var(--line-2)', position:'relative' }}>
                  <div style={{ position:'absolute', left:0, top:-3, width:8, height:8, background:'var(--accent)', borderRadius:999 }}/>
                </div>
                <div style={{ marginTop:10, fontSize:13, fontWeight:600 }}>{s.title}</div>
              </div>
            ))}
          </div>
        </div>

        {/* QR ordering */}
        <div className="card-paper" style={{ padding:'28px 30px', border:'1px solid var(--line)', borderRadius:20, background:'var(--bg)' }}>
          <LNDEyebrow color="var(--accent-2)">QR · Table ordering</LNDEyebrow>
          <h3 className="serif" style={{ fontSize:28, margin:'14px 0 12px', fontWeight:400, letterSpacing:'-0.02em', lineHeight:1.05 }}>Guest → paid in 10 seconds.</h3>
          <p style={{ fontSize:14, color:'var(--ink-2)', lineHeight:1.55, margin:'0 0 20px' }}>
            Scan the code on the table. See your menu, your photos, your brand. Apple Pay / Google Pay checkout. Order lands on the KDS the instant it's paid. No app, no login, no friction.
          </p>
          {/* Mini-phone */}
          <div style={{ display:'flex', justifyContent:'center', marginTop:12 }}>
            <div style={{ width:180, aspectRatio:'9/18.5', background:'var(--ink)', borderRadius:24, padding:8, boxShadow:'var(--shadow-lg)' }}>
              <div style={{ width:'100%', height:'100%', background:'var(--bg)', borderRadius:18, padding:'16px 12px', position:'relative', overflow:'hidden' }}>
                <div style={{ fontSize:9, color:'var(--muted)', fontFamily:'JetBrains Mono' }}>CASA LUPE · T4</div>
                <div className="serif" style={{ fontSize:18, lineHeight:1.05, marginTop:4, letterSpacing:'-0.01em' }}>Dinner menu</div>
                <div style={{ marginTop:10, display:'grid', gap:6 }}>
                  {[['Pan, tomate','€5'],['Pulpo gallego','€18'],['Cheesecake','€8']].map(([n,p],i) => (
                    <div key={i} style={{ display:'flex', gap:8, alignItems:'center', padding:'6px', border:'1px solid var(--line)', borderRadius:8 }}>
                      <div style={{ width:20, height:20, borderRadius:5, background:'linear-gradient(135deg, var(--accent-soft), var(--accent-3-soft))' }}/>
                      <div style={{ flex:1, fontSize:9.5, fontWeight:500 }}>{n}</div>
                      <div style={{ fontSize:9, fontFamily:'JetBrains Mono', color:'var(--muted)' }}>{p}</div>
                    </div>
                  ))}
                </div>
                <div style={{ position:'absolute', bottom:12, left:12, right:12, padding:'8px', background:'var(--ink)', color:'var(--bg)', borderRadius:8, fontSize:10, fontWeight:600, textAlign:'center' }}>Pay €31.00 with Apple Pay</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Website + Directory */}
      <div className="lnd-grid-2" style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:24 }}>
        {/* Website builder */}
        <div className="card-paper" style={{ padding:'28px 30px', border:'1px solid var(--line)', borderRadius:20, background:'var(--bg)' }}>
          <LNDEyebrow color="var(--accent-3)">Website builder</LNDEyebrow>
          <h3 className="serif" style={{ fontSize:28, margin:'14px 0 12px', fontWeight:400, letterSpacing:'-0.02em', lineHeight:1.05 }}>A real website. Your brand, not ours.</h3>
          <p style={{ fontSize:14, color:'var(--ink-2)', lineHeight:1.55, margin:'0 0 20px' }}>
            Visual Puck-based editor. Blocks for hero, menu, reservations, events. "Remix" button regenerates copy and photos in your voice. Custom domain, fast CDN, no code.
          </p>
          {/* Website preview */}
          <div style={{ background:'var(--paper-2)', borderRadius:14, padding:16, border:'1px solid var(--line)' }}>
            <div style={{ display:'flex', gap:6, marginBottom:10 }}>
              {['#E84C3D','#F1C40F','#2ECC71'].map((c,i) => <span key={i} style={{ width:10, height:10, borderRadius:999, background:c }}/>)}
              <div style={{ flex:1, marginLeft:8, padding:'3px 8px', background:'var(--bg)', border:'1px solid var(--line)', borderRadius:6, fontSize:11, color:'var(--muted)', fontFamily:'JetBrains Mono' }}>casalupe.es</div>
            </div>
            <div style={{ background:'var(--bg)', borderRadius:10, padding:'24px 20px', border:'1px solid var(--line)' }}>
              <div style={{ fontSize:10, color:'var(--muted)', letterSpacing:'.1em', textTransform:'uppercase' }}>Bilbao · est. 2019</div>
              <div className="serif" style={{ fontSize:36, lineHeight:1, marginTop:6, fontWeight:400, letterSpacing:'-0.02em' }}>Casa Lupe</div>
              <div style={{ fontSize:12, color:'var(--muted)', marginTop:8, maxWidth:300 }}>A neighborhood tavern. Wood fire. Natural wine. Whatever Paco brought back from the market.</div>
              <div style={{ marginTop:14, display:'flex', gap:8 }}>
                <span style={{ padding:'6px 12px', background:'var(--ink)', color:'#fff', borderRadius:6, fontSize:11, fontWeight:600 }}>Reserve</span>
                <span style={{ padding:'6px 12px', border:'1px solid var(--line)', borderRadius:6, fontSize:11, fontWeight:500 }}>View menu</span>
              </div>
            </div>
          </div>
        </div>

        {/* Directory */}
        <div className="card-paper" style={{ padding:'28px 30px', border:'1px solid var(--line)', borderRadius:20, background:'var(--paper-2)' }}>
          <LNDEyebrow color="var(--accent)">Public directory</LNDEyebrow>
          <h3 className="serif" style={{ fontSize:28, margin:'14px 0 12px', fontWeight:400, letterSpacing:'-0.02em', lineHeight:1.05 }}>Ranked on Google. For free.</h3>
          <p style={{ fontSize:14, color:'var(--ink-2)', lineHeight:1.55, margin:'0 0 20px' }}>
            Every venue on Vividish gets a listing in our city directory. SEO-optimized, schema-tagged, link-juice from the whole network. More foot traffic, no ads.
          </p>
          <div style={{ background:'var(--bg)', borderRadius:10, padding:14, border:'1px solid var(--line)' }}>
            {[
              { n:'Casa Lupe', cat:'Neighborhood tavern · Bilbao', r:'4.8' },
              { n:'Common Ground', cat:'Café · Barcelona', r:'4.9' },
            ].map((v,i) => (
              <div key={i} style={{ padding:'10px 0', borderTop: i>0 ? '1px solid var(--line)' : '0', display:'flex', alignItems:'center', gap:10 }}>
                <div style={{ width:32, height:32, borderRadius:8, background:'linear-gradient(135deg, var(--accent-soft), var(--accent-3-soft))' }}/>
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:13, fontWeight:500 }}>{v.n}</div>
                  <div style={{ fontSize:11, color:'var(--muted)' }}>{v.cat}</div>
                </div>
                <div style={{ fontSize:12, color:'var(--accent-3)' }}>★ {v.r}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </LNDContainer>
  </LNDSection>
);

// ──────────────────────────────────────────────────────────────
// TEAM — scheduling, timesheets, employee self-service
// ──────────────────────────────────────────────────────────────
const TeamSection = () => (
  <LNDSection id="team" className="lnd-pad-96" style={{ padding:'96px 0', background:'var(--paper-2)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)' }}>
    <LNDContainer>
      <div style={{ maxWidth:720, marginBottom:56 }}>
        <LNDEyebrow color="var(--accent-2)">Your team</LNDEyebrow>
        <h2 className="serif" style={{ fontSize:'clamp(36px, 4.2vw, 56px)', margin:'14px 0 14px', fontWeight:400, letterSpacing:'-0.025em', lineHeight:1.02 }}>
          Schedule, pay, and<br/>
          <em style={{ fontStyle:'italic', color:'var(--muted-2)' }}>actually talk</em> to staff.
        </h2>
        <p style={{ fontSize:17, color:'var(--ink-2)', lineHeight:1.55 }}>
          Employees onboard via a simple invite link — name, PIN, optional availability, done. Build schedules with drag-to-copy. Staff submit time-off and availability. You approve or deny with a note they see in their app.
        </p>
      </div>

      <div className="lnd-grid-2" style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:24, marginBottom:24 }}>
        {/* Schedule */}
        <div className="card-paper" style={{ padding:0, border:'1px solid var(--line)', borderRadius:20, background:'var(--bg)', overflow:'hidden' }}>
          <div style={{ padding:'18px 22px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
            <LNDEyebrow color="var(--accent)">Schedule · this week</LNDEyebrow>
            <span style={{ fontSize:11, padding:'3px 9px', background:'var(--accent-wash)', color:'var(--accent-ink)', borderRadius:99, fontWeight:600 }}>↻ 24 recurring</span>
          </div>
          <div style={{ padding:'8px 16px' }}>
            <div style={{ display:'grid', gridTemplateColumns:'100px repeat(7, 1fr)', fontSize:10, color:'var(--muted)', padding:'8px 0', borderBottom:'1px solid var(--line)', letterSpacing:'.06em', textTransform:'uppercase' }}>
              <div/>{['Mon','Tue','Wed','Thu','Fri','Sat','Sun'].map(d => <div key={d} style={{ textAlign:'center' }}>{d}</div>)}
            </div>
            {[
              { name:'Lucía', role:'Server' },
              { name:'Marco', role:'Bar' },
              { name:'Karim', role:'Kitchen' },
            ].map((p,i) => (
              <div key={p.name} style={{ display:'grid', gridTemplateColumns:'100px repeat(7, 1fr)', padding:'10px 0', borderTop: i>0 ? '1px solid var(--line)' : '0', alignItems:'center' }}>
                <div>
                  <div style={{ fontSize:12.5, fontWeight:500 }}>{p.name}</div>
                  <div style={{ fontSize:10.5, color:'var(--muted)' }}>{p.role}</div>
                </div>
                {[0,1,2,3,4,5,6].map(d => {
                  const has = (i+d) % 3 !== 1;
                  return (
                    <div key={d} style={{ padding:3, height:38 }}>
                      {has && <div style={{ height:'100%', borderRadius:5, background:'var(--accent-wash)', color:'var(--accent-ink)', display:'grid', placeItems:'center', fontSize:10, fontWeight:500, fontFamily:'JetBrains Mono' }}>10–17</div>}
                    </div>
                  );
                })}
              </div>
            ))}
          </div>
        </div>

        {/* Features list */}
        <div style={{ display:'grid', gap:14 }}>
          {[
            { icon:'repeat', t:'Recurring shifts', s:'Build a shift once — it repeats weekly until you say otherwise. Edit one, the whole series, or this-and-future.' },
            { icon:'calendar', t:'Availability requests', s:'Staff submit when they can work. You see a clean weekly view. Approve or deny with a note they read in their app.' },
            { icon:'check', t:'Clock in, pay out', s:'PIN-protected clock in at the register. Breaks tracked. Payroll math automatic, overtime included.' },
          ].map((f,i) => (
            <div key={i} className="card-paper" style={{ padding:20, border:'1px solid var(--line)', borderRadius:14, background:'var(--bg)', display:'flex', gap:14 }}>
              <span style={{ width:36, height:36, borderRadius:9, background:'var(--accent-2-wash)', color:'var(--accent-2)', display:'grid', placeItems:'center', flexShrink:0 }}>
                <Icon name={f.icon} size={16}/>
              </span>
              <div>
                <div style={{ fontSize:15, fontWeight:600, marginBottom:4 }}>{f.t}</div>
                <div style={{ fontSize:13.5, color:'var(--ink-2)', lineHeight:1.5 }}>{f.s}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Employee app preview */}
      <div className="lnd-invert-card lnd-team-dark-card" style={{ background:'var(--ink-fixed)', borderRadius:24, padding:'56px 48px', color:'var(--ink-fixed-on)', display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, alignItems:'center' }}>
        <div>
          <LNDEyebrow color="var(--accent-3)">Employee app</LNDEyebrow>
          <h3 className="serif" style={{ fontSize:42, margin:'14px 0 16px', fontWeight:400, letterSpacing:'-0.025em', lineHeight:1.05, color:'var(--ink-fixed-on)' }}>Staff onboard in two minutes.</h3>
          <p style={{ fontSize:15, color:'color-mix(in oklch, var(--ink-fixed-on), transparent 28%)', lineHeight:1.55, margin:0 }}>
            New hire gets an invite link. Five steps: confirm details, set PIN, emergency contact, share availability, done. They land on a dashboard that shows their next shift, earnings this week, and open shifts they can claim.
          </p>
          <div style={{ marginTop:24, display:'flex', gap:8, flexWrap:'wrap' }}>
            {['Today','Schedule','Open shifts','Requests','Earnings'].map(t => (
              <span key={t} style={{ padding:'6px 12px', background:'rgba(255,255,255,.08)', borderRadius:99, fontSize:12, fontWeight:500 }}>{t}</span>
            ))}
          </div>
        </div>
        {/* Mock onboarding card */}
        <div style={{ background:'var(--bg)', color:'var(--ink)', borderRadius:18, padding:24, boxShadow:'var(--shadow-lg)' }}>
          <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:16 }}>
            <div style={{ width:30, height:30, borderRadius:8, background:'var(--accent)', color:'#fff', display:'grid', placeItems:'center', fontSize:12, fontWeight:600 }}>CL</div>
            <div>
              <div style={{ fontSize:12, fontWeight:500 }}>Casa Lupe</div>
              <div style={{ fontSize:10, color:'var(--muted)' }}>Team onboarding</div>
            </div>
          </div>
          <div style={{ display:'flex', gap:4, marginBottom:14 }}>
            {[1,1,1,0,0,0].map((f,i) => <div key={i} style={{ flex: i===2?2:1, height:4, borderRadius:99, background: f?'var(--accent)':'var(--line-2)' }}/>)}
          </div>
          <div className="serif" style={{ fontSize:22, lineHeight:1.1, marginBottom:6, fontWeight:400, letterSpacing:'-0.01em' }}>Set your PIN</div>
          <div style={{ fontSize:11.5, color:'var(--muted)', marginBottom:16 }}>Used to clock in at the register.</div>
          <div style={{ display:'flex', justifyContent:'center', gap:10, marginBottom:12 }}>
            {[1,1,1,0].map((f,i) => <span key={i} style={{ width:12, height:12, borderRadius:999, background:f?'var(--accent)':'transparent', border:`2px solid ${f?'var(--accent)':'var(--line-2)'}` }}/>)}
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:6 }}>
            {['1','2','3','4','5','6','7','8','9'].map(k => (
              <div key={k} style={{ height:38, borderRadius:8, border:'1px solid var(--line)', background:'var(--bg)', display:'grid', placeItems:'center', fontSize:16, fontWeight:500, fontFamily:'JetBrains Mono' }}>{k}</div>
            ))}
          </div>
        </div>
      </div>
    </LNDContainer>
  </LNDSection>
);

// ──────────────────────────────────────────────────────────────
// ANALYTICS — numbers that matter
// ──────────────────────────────────────────────────────────────
const AnalyticsMini = () => (
  <div className="lnd-analytics-mini" style={{ display:'none', border:'1px solid var(--line)', borderRadius:16, background:'var(--bg)', overflow:'hidden' }}>
    <div style={{ padding:'14px 16px', borderBottom:'1px solid var(--line)' }}>
      <div style={{ fontSize:10, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600 }}>Revenue · today</div>
      <div style={{ display:'flex', alignItems:'baseline', gap:8, marginTop:6, flexWrap:'wrap' }}>
        <div className="serif t-tabular" style={{ fontSize:32, fontWeight:400, letterSpacing:'-0.02em', lineHeight:1 }}>€1,248</div>
        <div style={{ fontSize:11, color:'var(--ok)', fontWeight:500 }}>↑ +18%</div>
      </div>
    </div>
    <div style={{ padding:'12px 16px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10, borderBottom:'1px solid var(--line)' }}>
      {[
        { l:'Orders', v:'74', c:'+9%', up:true },
        { l:'Covers', v:'112', c:'-4%', up:false },
        { l:'Avg', v:'€16', c:'+2%', up:true },
      ].map((s,i) => (
        <div key={i}>
          <div style={{ fontSize:9, color:'var(--muted)', letterSpacing:'.06em', textTransform:'uppercase', fontWeight:600 }}>{s.l}</div>
          <div className="t-tabular serif" style={{ fontSize:18, fontWeight:400, marginTop:2, letterSpacing:'-0.01em' }}>{s.v}</div>
          <div style={{ fontSize:10, color: s.up?'var(--ok)':'var(--danger)' }}>{s.up?'↑':'↓'} {s.c}</div>
        </div>
      ))}
    </div>
    <div style={{ padding:'14px 16px' }}>
      <svg viewBox="0 0 340 60" style={{ width:'100%', height:60 }}>
        <defs>
          <linearGradient id="sparkfillm" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.2"/>
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d="M0,50 L30,40 L60,46 L90,30 L120,34 L150,22 L180,28 L210,16 L240,20 L270,8 L300,12 L340,2 L340,60 L0,60 Z" fill="url(#sparkfillm)"/>
        <path d="M0,50 L30,40 L60,46 L90,30 L120,34 L150,22 L180,28 L210,16 L240,20 L270,8 L300,12 L340,2" fill="none" stroke="var(--accent)" strokeWidth="2"/>
      </svg>
    </div>
  </div>
);

const LandingAnalytics = () => (
  <LNDSection className="lnd-pad-112" style={{ padding:'112px 0' }}>
    <LNDContainer>
      <div className="lnd-analytics-grid" style={{ display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:72, alignItems:'center' }}>
        <div className="card-paper lnd-analytics-full" style={{ padding:0, border:'1px solid var(--line)', borderRadius:20, background:'var(--bg)', overflow:'hidden' }}>
          <div style={{ padding:'18px 22px', borderBottom:'1px solid var(--line)' }}>
            <LNDEyebrow color="var(--accent)">Revenue · today</LNDEyebrow>
            <div style={{ display:'flex', alignItems:'baseline', gap:10, marginTop:8 }}>
              <div className="serif t-tabular" style={{ fontSize:48, fontWeight:400, letterSpacing:'-0.02em', lineHeight:1 }}>€1,248</div>
              <div style={{ fontSize:13, color:'var(--ok)', fontWeight:500 }}>↑ +18% vs last week</div>
            </div>
          </div>
          <div style={{ padding:'24px 22px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:16, borderBottom:'1px solid var(--line)' }}>
            {[
              { l:'Orders', v:'74', c:'+9%', up:true },
              { l:'Covers', v:'112', c:'-4%', up:false },
              { l:'Avg check', v:'€16.86', c:'+2%', up:true },
            ].map((s,i) => (
              <div key={i}>
                <div style={{ fontSize:11, color:'var(--muted)', letterSpacing:'.06em', textTransform:'uppercase', fontWeight:500 }}>{s.l}</div>
                <div className="t-tabular serif" style={{ fontSize:26, fontWeight:400, marginTop:4, letterSpacing:'-0.01em' }}>{s.v}</div>
                <div style={{ fontSize:11, color: s.up?'var(--ok)':'var(--danger)', marginTop:2 }}>{s.up?'↑':'↓'} {s.c}</div>
              </div>
            ))}
          </div>
          {/* Sparkline */}
          <div style={{ padding:'20px 22px' }}>
            <svg viewBox="0 0 340 80" style={{ width:'100%', height:80 }}>
              <defs>
                <linearGradient id="sparkfill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.2"/>
                  <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d="M0,68 L30,55 L60,62 L90,40 L120,45 L150,30 L180,38 L210,22 L240,28 L270,12 L300,18 L340,4 L340,80 L0,80 Z" fill="url(#sparkfill)"/>
              <path d="M0,68 L30,55 L60,62 L90,40 L120,45 L150,30 L180,38 L210,22 L240,28 L270,12 L300,18 L340,4" fill="none" stroke="var(--accent)" strokeWidth="2.5"/>
            </svg>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:10, color:'var(--muted)', fontFamily:'JetBrains Mono', marginTop:6 }}>
              {['08','10','12','14','16','18','20','22'].map(t => <span key={t}>{t}</span>)}
            </div>
          </div>
        </div>
        <AnalyticsMini/>
        <div>
          <LNDEyebrow color="var(--accent)">Analytics</LNDEyebrow>
          <h2 className="serif" style={{ fontSize:'clamp(36px, 4.2vw, 56px)', margin:'14px 0 16px', fontWeight:400, letterSpacing:'-0.025em', lineHeight:1.02 }}>
            Numbers that<br/>
            <em style={{ fontStyle:'italic', color:'var(--accent)' }}>actually move</em><br/>
            the needle.
          </h2>
          <p style={{ fontSize:17, color:'var(--ink-2)', lineHeight:1.55 }}>
            Not a dashboard of vanity metrics. Revenue through the day, best-selling items by profit margin, covers versus capacity, staff hours versus sales. The numbers a real operator asks for on Monday morning.
          </p>
          <ul style={{ marginTop:22, padding:0, listStyle:'none', display:'grid', gap:10 }}>
            {[
              'Daily revenue, weekly trends, Saturday deltas',
              'Profit-weighted best-sellers (not just top-sold)',
              'Labor cost as % of revenue — live',
              'Cover time and table-turn medians',
              'Export anything to CSV',
            ].map((r,i) => (
              <li key={i} style={{ display:'flex', gap:10, alignItems:'flex-start', fontSize:14.5, color:'var(--ink-2)' }}>
                <span style={{ width:18, height:18, borderRadius:999, background:'var(--accent-wash)', color:'var(--accent-ink)', display:'grid', placeItems:'center', flexShrink:0, marginTop:2 }}>
                  <Icon name="check" size={10}/>
                </span>
                {r}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </LNDContainer>
  </LNDSection>
);

// ──────────────────────────────────────────────────────────────
// FEEDBACK → DECISIONS — closing the loop
// ──────────────────────────────────────────────────────────────
const FeedbackLoop = () => (
  <LNDSection id="feedback" className="lnd-pad-96" style={{ padding:'96px 0', background:'var(--ink-fixed)', color:'var(--ink-fixed-on)', position:'relative', overflow:'hidden' }}>
    <div aria-hidden style={{ position:'absolute', top:-100, right:-60, width:380, height:380, borderRadius:'50%', background:'var(--accent)', opacity:.16, filter:'blur(24px)' }}/>
    <div aria-hidden style={{ position:'absolute', bottom:-100, left:-60, width:320, height:320, borderRadius:'50%', background:'var(--accent-3)', opacity:.12, filter:'blur(30px)' }}/>
    <LNDContainer style={{ position:'relative' }}>
      <div style={{ maxWidth:720, marginBottom:56 }}>
        <LNDEyebrow color="var(--accent-3)">Close the loop</LNDEyebrow>
        <h2 className="serif" style={{ fontSize:'clamp(36px, 4.2vw, 56px)', margin:'14px 0 14px', fontWeight:400, letterSpacing:'-0.025em', lineHeight:1.02, color:'var(--ink-fixed-on)' }}>
          Every guest leaves an opinion.<br/>
          <em style={{ fontStyle:'italic', color:'var(--accent-3)' }}>We turn it into a decision.</em>
        </h2>
        <p style={{ fontSize:17, color:'color-mix(in oklch, var(--ink-fixed-on), transparent 28%)', lineHeight:1.55 }}>
          One tap after the bill. An emoji, maybe a tag, maybe a comment. On your side: sentiment by item, by server, by time-of-day — with the one thing most analytics tools skip: what changed this week and why it matters.
        </p>
      </div>

      {/* Three-step flow: Capture → Analyze → Act */}
      <div className="lnd-feedback-3" style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:20, marginBottom:32 }}>
        {/* Capture — phone mockup */}
        <div style={{ background:'var(--bg)', color:'var(--ink)', borderRadius:20, padding:24, position:'relative', overflow:'hidden' }}>
          <LNDEyebrow color="var(--accent)">① Capture</LNDEyebrow>
          <div className="serif" style={{ fontSize:22, margin:'12px 0 8px', fontWeight:400, letterSpacing:'-0.015em', lineHeight:1.1 }}>After the bill. One tap.</div>
          <div style={{ fontSize:13, color:'var(--muted)', marginBottom:18 }}>Guest taps an emoji. Takes 3 seconds.</div>
          <div style={{ background:'var(--bg)', borderRadius:14, padding:'16px 14px', border:'1px solid var(--line)' }}>
            <div style={{ fontSize:10.5, color:'var(--muted)', letterSpacing:'.08em', textTransform:'uppercase', fontWeight:600 }}>Feedback</div>
            <div className="serif" style={{ fontSize:18, margin:'6px 0 2px', fontWeight:400 }}>How was it?</div>
            <div style={{ fontSize:11, color:'var(--muted)' }}>One tap helps us improve.</div>
            <div style={{ display:'flex', gap:14, justifyContent:'center', marginTop:16, padding:'4px 0' }}>
              {[
                { e:'😕', label:'Not great', tint:'var(--danger)', active:false },
                { e:'🙂', label:'Good',      tint:'var(--warn)',   active:false },
                { e:'😍', label:'Loved it',  tint:'var(--ok)',     active:true },
              ].map((s,i) => (
                <div key={i} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}>
                  <div style={{ width:56, height:56, borderRadius:999, background: s.active ? `color-mix(in oklch, ${s.tint} 14%, transparent)` : 'var(--paper-2)', border:`2px solid ${s.active ? s.tint : 'var(--line)'}`, display:'grid', placeItems:'center', fontSize:26, boxShadow: s.active ? `0 0 0 4px color-mix(in oklch, ${s.tint} 14%, transparent)` : 'none' }}>{s.e}</div>
                  <div style={{ fontSize:9, letterSpacing:'.08em', textTransform:'uppercase', fontWeight:600, color: s.active ? s.tint : 'var(--muted)' }}>{s.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Analyze — mini analytics card */}
        <div style={{ background:'var(--bg)', color:'var(--ink)', borderRadius:20, padding:24 }}>
          <LNDEyebrow color="var(--accent-2)">② Analyze</LNDEyebrow>
          <div className="serif" style={{ fontSize:22, margin:'12px 0 8px', fontWeight:400, letterSpacing:'-0.015em', lineHeight:1.1 }}>By item. By server. By hour.</div>
          <div style={{ fontSize:13, color:'var(--muted)', marginBottom:18 }}>Sentiment, not just a score.</div>
          <div style={{ background:'var(--bg)', borderRadius:14, padding:'14px 16px', border:'1px solid var(--line)' }}>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:11, marginBottom:6 }}>
              <span style={{ fontWeight:500 }}>Food</span>
              <span style={{ color:'var(--muted)' }}>46 mentions</span>
            </div>
            <div style={{ display:'flex', height:7, borderRadius:99, overflow:'hidden', background:'var(--paper-2)', marginBottom:12 }}>
              <div style={{ width:'68%', background:'var(--ok)' }}/>
              <div style={{ width:'24%', background:'var(--warn)' }}/>
              <div style={{ width:'8%', background:'var(--danger)' }}/>
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:11, marginBottom:6 }}>
              <span style={{ fontWeight:500 }}>Speed</span>
              <span style={{ color:'var(--muted)' }}>18 mentions</span>
            </div>
            <div style={{ display:'flex', height:7, borderRadius:99, overflow:'hidden', background:'var(--paper-2)', marginBottom:12 }}>
              <div style={{ width:'28%', background:'var(--ok)' }}/>
              <div style={{ width:'30%', background:'var(--warn)' }}/>
              <div style={{ width:'42%', background:'var(--danger)' }}/>
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', fontSize:11, marginBottom:6 }}>
              <span style={{ fontWeight:500 }}>Atmosphere</span>
              <span style={{ color:'var(--muted)' }}>24 mentions</span>
            </div>
            <div style={{ display:'flex', height:7, borderRadius:99, overflow:'hidden', background:'var(--paper-2)' }}>
              <div style={{ width:'80%', background:'var(--ok)' }}/>
              <div style={{ width:'18%', background:'var(--warn)' }}/>
              <div style={{ width:'2%', background:'var(--danger)' }}/>
            </div>
          </div>
        </div>

        {/* Act — insight card */}
        <div style={{ background:'var(--bg)', color:'var(--ink)', borderRadius:20, padding:24 }}>
          <LNDEyebrow color="var(--accent-3)">③ Act</LNDEyebrow>
          <div className="serif" style={{ fontSize:22, margin:'12px 0 8px', fontWeight:400, letterSpacing:'-0.015em', lineHeight:1.1 }}>We flag what changed.</div>
          <div style={{ fontSize:13, color:'var(--muted)', marginBottom:18 }}>Not metrics — decisions.</div>
          <div style={{ display:'grid', gap:10 }}>
            <div style={{ padding:'12px 14px', borderRadius:10, background:'color-mix(in oklch, var(--danger) 7%, transparent)', border:'1px solid color-mix(in oklch, var(--danger) 28%, transparent)', display:'flex', alignItems:'center', gap:10 }}>
              <span style={{ fontSize:18, color:'var(--danger)' }}>↓</span>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:13, fontWeight:500 }}>Pulpo gallego</div>
                <div style={{ fontSize:11, color:'var(--muted)' }}>4.8 → 4.2 over 11 responses</div>
              </div>
              <div style={{ fontFamily:'JetBrains Mono', fontSize:11, fontWeight:600, color:'var(--danger)' }}>-0.6</div>
            </div>
            <div style={{ padding:'12px 14px', borderRadius:10, background:'color-mix(in oklch, var(--ok) 7%, transparent)', border:'1px solid color-mix(in oklch, var(--ok) 28%, transparent)', display:'flex', alignItems:'center', gap:10 }}>
              <span style={{ fontSize:18, color:'var(--ok)' }}>↑</span>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:13, fontWeight:500 }}>Cordero al horno</div>
                <div style={{ fontSize:11, color:'var(--muted)' }}>4.3 → 4.8 over 14 responses</div>
              </div>
              <div style={{ fontFamily:'JetBrains Mono', fontSize:11, fontWeight:600, color:'var(--ok)' }}>+0.5</div>
            </div>
          </div>
        </div>
      </div>

      <div className="lnd-feedback-stats" style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:20, paddingTop:24, borderTop:'1px solid color-mix(in oklch, var(--ink-fixed-on), transparent 86%)' }}>
        {[
          { v:'41%', l:'Response rate', s:'vs 2–3% for email surveys' },
          { v:'3s',  l:'To submit',      s:'One emoji, no signup' },
          { v:'6',   l:'Tag dimensions', s:'Food · Service · Speed · Value · Atmo · Clean' },
          { v:'Live',l:'Stream',         s:'Every response appears instantly' },
        ].map((s,i) => (
          <div key={i}>
            <div className="serif t-tabular" style={{ fontSize:32, fontWeight:400, letterSpacing:'-0.02em', color:'var(--ink-fixed-on)' }}>{s.v}</div>
            <div style={{ fontSize:11.5, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--accent-3)', fontWeight:600, marginTop:6 }}>{s.l}</div>
            <div style={{ fontSize:12.5, color:'color-mix(in oklch, var(--ink-fixed-on), transparent 40%)', marginTop:4 }}>{s.s}</div>
          </div>
        ))}
      </div>
    </LNDContainer>
  </LNDSection>
);

// ──────────────────────────────────────────────────────────────
// QUOTE / testimonial
// ──────────────────────────────────────────────────────────────
const Quote = () => (
  <LNDSection style={{ padding:'80px 0 96px' }}>
    <LNDContainer style={{ textAlign:'center', maxWidth:920 }}>
      <div style={{ display:'flex', gap:4, justifyContent:'center', marginBottom:18, color:'var(--accent-3)' }}>
        {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={18}/>)}
      </div>
      <blockquote className="serif" style={{ fontSize:'clamp(30px, 3.8vw, 48px)', fontWeight:400, lineHeight:1.15, letterSpacing:'-0.02em', margin:0 }}>
        "I replaced three apps, a Google Sheet, and my Sunday afternoons.
        <em style={{ color:'var(--accent)' }}> I got my weekends back.</em>"
      </blockquote>
      <div style={{ marginTop:32, display:'flex', alignItems:'center', justifyContent:'center', gap:12, fontSize:14 }}>
        <div style={{ width:44, height:44, borderRadius:999, background:'linear-gradient(135deg, var(--accent-soft), var(--accent-3-soft))' }}/>
        <div style={{ textAlign:'left' }}>
          <div style={{ color:'var(--ink)', fontWeight:600 }}>Inés Torres</div>
          <div style={{ color:'var(--muted)' }}>Owner · Common Ground · Barcelona</div>
        </div>
      </div>
    </LNDContainer>
  </LNDSection>
);

// ──────────────────────────────────────────────────────────────
// PRICING
// ──────────────────────────────────────────────────────────────
const Pricing = ({ go, onContact }) => {
  const plans = [
    {
      id:'starter', name:'Starter', price:'€0', per:'/ month', blurb:'Get set up — free for 30 days, then €29/mo.',
      features:['1 venue · 1 terminal','Menu studio, basic', 'QR table ordering','Website builder','Community support'],
      cta:'Start free', featured:false,
    },
    {
      id:'growth', name:'Growth', price:'€49', per:'/ month', blurb:'For a single, busy venue. Everything to run service.',
      features:['1 venue · up to 3 terminals','Menu studio + AI photos','Kitchen display','Reservations','Inventory & recipes','Team scheduling · payroll','Live analytics','Email + chat support'],
      cta:'Choose Growth', featured:true,
    },
    {
      id:'scale', name:'Scale', price:'€99', per:'/ month per venue', blurb:'Multi-location. Centralized menu, per-venue analytics.',
      features:['Unlimited terminals per venue','Menu replication across venues','Consolidated analytics','Advanced permissions & audit log','API access','Custom onboarding + success manager'],
      cta:'Choose Scale', featured:false,
    },
  ];
  const pick = (p) => {
    if (window.vv) window.vv.toast(`${p.name} selected — continuing to onboarding`, { variant:'info' });
    go('onboarding', { plan: p.id });
  };
  return (
    <LNDSection id="pricing" className="lnd-pad-96" style={{ padding:'96px 0', background:'var(--paper-2)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)' }}>
      <LNDContainer>
        <div style={{ textAlign:'center', marginBottom:56 }}>
          <LNDEyebrow color="var(--accent)">Pricing</LNDEyebrow>
          <h2 className="serif" style={{ fontSize:'clamp(40px, 4.6vw, 64px)', margin:'14px 0 14px', fontWeight:400, letterSpacing:'-0.025em', lineHeight:1.02 }}>
            Priced like a <em style={{ fontStyle:'italic', color:'var(--accent)' }}>utility</em>, not a gold rush.
          </h2>
          <p style={{ fontSize:16, color:'var(--ink-2)', maxWidth:540, margin:'0 auto', lineHeight:1.55 }}>
            No per-terminal surcharges. No markup on payments beyond processor cost. No "integrations" upsell — it's all included.
          </p>
        </div>
        <div className="lnd-pricing-grid" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:18 }}>
          {plans.map(p => (
            <div key={p.id} className="card-paper lnd-pricing-card" style={{
              padding:'32px 30px',
              background: p.featured ? 'var(--accent)' : 'var(--bg)',
              color: p.featured ? '#fff' : 'var(--ink)',
              border: p.featured ? '1px solid var(--accent)' : '1px solid var(--line)',
              display:'flex', flexDirection:'column', gap:16, position:'relative',
              boxShadow: p.featured ? 'var(--shadow-lg)' : 'var(--shadow-sm)',
            }}>
              {p.featured && <div style={{ position:'absolute', top:-12, left:30, background:'var(--ink-fixed)', color:'var(--ink-fixed-on)', padding:'4px 12px', borderRadius:99, fontSize:11, fontWeight:700, letterSpacing:'.08em', textTransform:'uppercase' }}>Most popular</div>}
              <div style={{ fontSize:12, letterSpacing:'.1em', textTransform:'uppercase', fontWeight:700, opacity: p.featured?.7:.85 }}>{p.name}</div>
              <div style={{ display:'flex', alignItems:'baseline', gap:8 }}>
                <div className="serif" style={{ fontSize:52, lineHeight:1, fontWeight:400, letterSpacing:'-0.02em' }}>{p.price}</div>
                <div style={{ fontSize:13, opacity:.7 }}>{p.per}</div>
              </div>
              <p style={{ fontSize:13.5, lineHeight:1.55, margin:0, opacity:.85 }}>{p.blurb}</p>
              <ul style={{ listStyle:'none', padding:0, margin:'8px 0 0', display:'grid', gap:10, fontSize:13.5 }}>
                {p.features.map((f,j) => (
                  <li key={j} style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
                    <span style={{ width:16, height:16, borderRadius:999, background: p.featured ? 'rgba(255,255,255,.12)' : 'var(--accent-wash)', color: p.featured ? '#F4F1EA' : 'var(--accent-ink)', display:'grid', placeItems:'center', flexShrink:0, marginTop:2 }}>
                      <Icon name="check" size={9}/>
                    </span>
                    {f}
                  </li>
                ))}
              </ul>
              <div style={{ flex:1 }}/>
              <button
                className={p.featured ? 'btn' : 'btn btn-primary'}
                onClick={() => pick(p)}
                style={p.featured
                  ? { background:'var(--ink-fixed)', color:'var(--ink-fixed-on)', border:0, padding:'13px 18px', justifyContent:'center', fontSize:14.5, fontWeight:600 }
                  : { padding:'13px 18px', justifyContent:'center', fontSize:14.5, fontWeight:600 }
                }>
                {p.cta} <Icon name="arrow-right" size={14}/>
              </button>
            </div>
          ))}
        </div>
        <div style={{ marginTop:32, textAlign:'center', fontSize:13, color:'var(--muted)' }}>
          Running a group of 5+ locations? <a onClick={onContact} style={{ color:'var(--accent)', cursor:'pointer', fontWeight:500 }}>Talk to us about Enterprise →</a>
        </div>
      </LNDContainer>
    </LNDSection>
  );
};

// ──────────────────────────────────────────────────────────────
// FAQ — answer the objections
// ──────────────────────────────────────────────────────────────
const FAQ = () => {
  const [open, setOpen] = useStateLND(0);
  const qs = [
    { q:'How long does migration take?', a:'Most single-venue operations are up and running in under a week. We import your existing menu, configure your tables, and stay on a call until your first live order.' },
    { q:'What hardware do we need?', a:'An iPad (or any tablet), a receipt printer, and a card reader. Vividish runs on devices you already own — we don\'t lock you to proprietary hardware. European card readers supported: SumUp, Viva, Stripe Terminal.' },
    { q:'Do you charge extra for integrations?', a:'No. Menu, register, reservations, KDS, inventory, scheduling, website, QR, directory, and payments are all built in. No App Store to browse, no per-module upsell.' },
    { q:'Can I keep my current processor?', a:'Yes. We integrate with Stripe, SumUp, Viva Wallet, and Adyen. Keep the terms you negotiated.' },
    { q:'Is my data portable?', a:'Always. Full CSV exports of menus, orders, customers, staff records, and financials. No lock-in.' },
    { q:'Where is data stored?', a:'Frankfurt. GDPR-native, not a bolted-on compliance page.' },
  ];
  return (
    <LNDSection style={{ padding:'96px 0' }}>
      <LNDContainer style={{ maxWidth:880 }}>
        <div style={{ textAlign:'center', marginBottom:48 }}>
          <LNDEyebrow>FAQ</LNDEyebrow>
          <h2 className="serif" style={{ fontSize:'clamp(36px, 4.2vw, 52px)', margin:'14px 0 0', fontWeight:400, letterSpacing:'-0.025em' }}>
            What operators ask us.
          </h2>
        </div>
        <div style={{ border:'1px solid var(--line)', borderRadius:16, overflow:'hidden', background:'var(--bg)' }}>
          {qs.map((item, i) => (
            <div key={i} style={{ borderTop: i>0 ? '1px solid var(--line)' : '0' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width:'100%', textAlign:'left', padding:'22px 26px', background:'transparent', border:0, display:'flex', justifyContent:'space-between', alignItems:'center', cursor:'pointer', fontFamily:'inherit', color:'inherit' }}>
                <span style={{ fontSize:17, fontWeight:500 }}>{item.q}</span>
                <span style={{ fontSize:22, color:'var(--muted)', transition:'transform .24s', transform: open===i ? 'rotate(45deg)' : 'rotate(0)', display:'inline-block' }}>+</span>
              </button>
              {open === i && (
                <div style={{ padding:'0 26px 22px', fontSize:15, lineHeight:1.6, color:'var(--ink-2)', maxWidth:720 }}>
                  {item.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </LNDContainer>
    </LNDSection>
  );
};

// ──────────────────────────────────────────────────────────────
// CTA + FOOTER
// ──────────────────────────────────────────────────────────────
const CTA = ({ go, onContact }) => (
  <LNDSection style={{ padding:'48px 0 96px' }}>
    <LNDContainer>
      <div className="lnd-invert-card lnd-cta-block" style={{ background:'var(--ink-fixed)', color:'var(--ink-fixed-on)', borderRadius:28, padding:'80px 64px', display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:48, alignItems:'center', position:'relative', overflow:'hidden' }}>
        <div aria-hidden style={{ position:'absolute', top:-80, right:-80, width:340, height:340, borderRadius:'50%', background:'var(--accent)', opacity:.22, filter:'blur(20px)' }}/>
        <div aria-hidden style={{ position:'absolute', bottom:-100, left:'35%', width:240, height:240, borderRadius:'50%', background:'var(--accent-3)', opacity:.14, filter:'blur(30px)' }}/>
        <div style={{ position:'relative', zIndex:1 }}>
          <h2 className="serif" style={{ fontSize:'clamp(40px, 4.6vw, 64px)', margin:0, fontWeight:400, letterSpacing:'-0.025em', lineHeight:1.02 }}>
            Move your menu over<br/>this weekend.
          </h2>
          <p style={{ marginTop:22, color:'color-mix(in oklch, var(--ink-fixed-on), transparent 28%)', fontSize:17, maxWidth:480, lineHeight:1.5 }}>
            Free for 30 days. We'll import your menu, set up your QR codes, and stay on a call until your first order goes through. No credit card until month two.
          </p>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:12, position:'relative', zIndex:1 }}>
          <button className="btn" style={{ background:'var(--accent)', color:'#fff', border:0, padding:'16px 24px', fontSize:15.5, justifyContent:'center', fontWeight:600 }} onClick={() => go('onboarding')}>
            Start your workspace <Icon name="arrow-right" size={16}/>
          </button>
          <button className="btn" style={{ background:'transparent', color:'var(--ink-fixed-on)', borderColor:'rgba(255,255,255,.24)', padding:'16px 24px', fontSize:15, justifyContent:'center' }} onClick={onContact}>
            Talk to sales
          </button>
          <div style={{ fontSize:11.5, color:'color-mix(in oklch, var(--ink-fixed-on), transparent 44%)', textAlign:'center', marginTop:6 }}>
            Setup call included · Cancel any time · GDPR-native
          </div>
        </div>
      </div>
    </LNDContainer>
  </LNDSection>
);

const Footer = () => (
  <footer style={{ borderTop:'1px solid var(--line)', padding:'56px 32px 32px', background:'var(--paper-2)' }}>
    <LNDContainer style={{ padding:0 }}>
      <div className="lnd-footer-grid" style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr 1fr 1fr 1.1fr', gap:32, marginBottom:48 }}>
        <div>
          <div className="vv-mark"><span className="glyph"/> Vividish</div>
          <p style={{ marginTop:12, fontSize:13, color:'var(--muted)', lineHeight:1.6, maxWidth:280 }}>
            The operating system for modern hospitality. Built in Europe, for Europe.
          </p>
        </div>
        {[
          { h:'Product', links:['Register','Kitchen display','Reservations','QR ordering','Menu studio','Website','Team','Analytics'] },
          { h:'For', links:['Cafés','Restaurants','Bars','Bakeries','Multi-location groups'] },
          { h:'Company', links:['About','Careers','Press','Contact','Security'] },
          { h:'Resources', links:['Help center','Operator guides','Roadmap','Changelog','Status'] },
        ].map((c) => (
          <div key={c.h}>
            <div style={{ fontSize:11, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600, marginBottom:14 }}>{c.h}</div>
            <ul style={{ listStyle:'none', padding:0, margin:0, display:'grid', gap:8 }}>
              {c.links.map(l => (
                <li key={l}><a style={{ fontSize:13.5, color:'var(--ink-2)', cursor:'pointer', textDecoration:'none' }}>{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div className="lnd-footer-bottom" style={{ paddingTop:28, borderTop:'1px solid var(--line)', display:'flex', justifyContent:'space-between', alignItems:'center', fontSize:12, color:'var(--muted)', flexWrap:'wrap', gap:16 }}>
        <div>© 2026 Vividish · Made in Europe · <a style={{cursor:'pointer', color:'inherit'}}>Privacy</a> · <a style={{cursor:'pointer', color:'inherit'}}>Terms</a> · <a style={{cursor:'pointer', color:'inherit'}}>DPA</a></div>
        <div>
          <LNDWaitlist/>
        </div>
      </div>
    </LNDContainer>
  </footer>
);

// ──────────────────────────────────────────────────────────────
// Root
// ──────────────────────────────────────────────────────────────
const LND_ResponsiveStyles = () => (
  <style>{`
    /* ── Inverted sections: match light/dark properly ────────── */
    .lnd-invert-card { background: var(--ink-fixed); color: var(--ink-fixed-on); }
    [data-theme="dark"] .lnd-invert-card { border: 1px solid var(--line); }

    /* ── Mobile responsiveness ───────────────────────────────── */
    @media (max-width: 860px) {
      .lnd-grid-2 { grid-template-columns: 1fr !important; gap: 36px !important; }
      .lnd-grid-3 { grid-template-columns: 1fr !important; gap: 16px !important; }
      .lnd-grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
      .lnd-grid-5 { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
      .lnd-hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
      .lnd-hero-grid h1 { font-size: clamp(40px, 10vw, 64px) !important; }
      .lnd-container { padding-left: 20px !important; padding-right: 20px !important; }
      .lnd-pad-96 { padding-top: 64px !important; padding-bottom: 64px !important; }
      .lnd-pad-112 { padding-top: 72px !important; padding-bottom: 72px !important; }
      .lnd-pad-hero { padding: 48px 20px 32px !important; }
      .lnd-hide-md { display: none !important; }
      .lnd-hero-visual { min-height: 420px !important; transform: scale(0.95); }
      .lnd-big-serif { font-size: clamp(32px, 6.6vw, 44px) !important; line-height: 1.05 !important; }
      .lnd-section-title { font-size: clamp(30px, 6.8vw, 42px) !important; }
      .lnd-pricing-card { padding: 26px 22px !important; }
      .lnd-cta-block { flex-direction: column; padding: 48px 24px !important; gap: 28px !important; }
      .lnd-cta-block > div:first-of-type h2 { font-size: clamp(32px, 7vw, 44px) !important; }
      .lnd-logo-strip { flex-wrap: wrap; gap: 18px !important; justify-content: center !important; padding: 8px 0 !important; }
      .lnd-logo-strip span.eyebrow { width: 100%; text-align: center; }
      .lnd-logo-strip > div { font-size: 18px !important; }
      .lnd-nav-links { display: none !important; }
      .lnd-nav { padding: 12px 20px !important; }
      .lnd-nav-cta .label-long { display: none; }
      .lnd-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
      .lnd-footer-grid > div:first-child { grid-column: 1 / -1; }
      .lnd-footer-bottom { flex-direction: column; align-items: flex-start !important; gap: 16px !important; }
      .lnd-team-dark-card { grid-template-columns: 1fr !important; padding: 36px 24px !important; gap: 32px !important; }
      .lnd-feedback-3 { grid-template-columns: 1fr !important; gap: 14px !important; }
      .lnd-feedback-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
      .lnd-analytics-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
      .lnd-analytics-full { display: none !important; }
      .lnd-analytics-mini { display: block !important; }
      .lnd-compound-hero { display: none !important; } /* fallback to simpler visual on narrow */
      .lnd-compound-mobile { display: block !important; }
      .lnd-faq-q { font-size: 15px !important; padding: 18px 20px !important; }
    }

    @media (max-width: 520px) {
      .lnd-grid-4 { grid-template-columns: 1fr !important; }
      .lnd-grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
      .lnd-footer-grid { grid-template-columns: 1fr !important; }
      .lnd-feedback-stats { grid-template-columns: 1fr !important; }
      .lnd-pricing-grid { grid-template-columns: 1fr !important; }
      .lnd-hide-sm { display: none !important; }
    }

  `}</style>
);

const Landing = ({ go, theme, setTheme }) => {
  const [demo, setDemo] = useStateLND(false);
  const [contact, setContact] = useStateLND(false);
  return (
    <div data-screen-label="01 Landing" style={{ minHeight:'100%', background:'var(--bg)' }} className="lnd-scroll">
      <LND_ResponsiveStyles/>
      <LandingNav go={go} theme={theme} setTheme={setTheme} onDemo={()=>setDemo(true)} onFeatures={()=>go('features')}/>
      <Hero go={go} onDemo={()=>setDemo(true)}/>
      <LogoStrip/>
      <Stack go={go}/>
      <RunService/>
      <Grow/>
      <TeamSection/>
      <LandingAnalytics/>
      <FeedbackLoop/>
      <Quote/>
      <Pricing go={go} onContact={() => setContact(true)}/>
      <FAQ/>
      <CTA go={go} onContact={()=>setContact(true)}/>
      <Footer/>
      {demo && <LNDWatchDemo onClose={()=>setDemo(false)}/>}
      {contact && <LNDContactModal onClose={()=>setContact(false)}/>}
    </div>
  );
};

window.Landing = Landing;
window.LND_Footer = Footer;