/* global Icon */
// Vertical landing pages: Cafés, Restaurants, Bars, Bakeries, Groups.
// Each page is deeply tailored — not a copy swap — with a custom mockup,
// pain points, pricing CTA, and FAQ specific to the vertical.
const { useState: useStateSOL, useEffect: useEffectSOL } = React;

// ──────────────────────────────────────────────────────────────
// Shared primitives (reuse Landing idioms but scoped locally)
// ──────────────────────────────────────────────────────────────
const SOLEyebrow = ({ 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 SOLContainer = ({ children, style }) => (
  <div className="lnd-container" style={{ maxWidth:1200, margin:'0 auto', padding:'0 32px', ...style }}>{children}</div>
);

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

// ──────────────────────────────────────────────────────────────
// Nav — shared across all vertical pages
// ──────────────────────────────────────────────────────────────
const SOLNav = ({ go, active }) => {
  const [scrolled, setScrolled] = useStateSOL(false);
  const [solOpen, setSolOpen] = useStateSOL(false);
  useEffectSOL(() => {
    const parent = document.querySelector('[data-sol-root]');
    const h = () => setScrolled(parent?.scrollTop > 24);
    if (parent) { parent.addEventListener('scroll', h); h(); return () => parent.removeEventListener('scroll', h); }
  }, []);
  const verticals = [
    { id:'cafes', name:'Cafés' },
    { id:'restaurants', name:'Restaurants' },
    { id:'bars', name:'Bars' },
    { id:'bakeries', name:'Bakeries' },
    { id:'groups', name:'Multi-location groups' },
  ];
  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',
    }}>
      <SOLContainer style={{ padding:`${scrolled ? '12px' : '18px'} 32px`, display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <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' }}>
          <div style={{ position:'relative' }} onMouseEnter={()=>setSolOpen(true)} onMouseLeave={()=>setSolOpen(false)}>
            <a style={{cursor:'pointer', color:'var(--accent)', fontWeight:500}}>Solutions ↓</a>
            {solOpen && (
              <div style={{ position:'absolute', top:'100%', left:-12, marginTop:8, background:'var(--bg)', border:'1px solid var(--line)', borderRadius:12, padding:8, minWidth:220, boxShadow:'var(--shadow-lg)', zIndex:60 }}>
                {verticals.map(v => (
                  <a key={v.id} onClick={()=>go(v.id)} style={{ display:'block', padding:'10px 12px', borderRadius:8, cursor:'pointer', color: active===v.id?'var(--accent)':'var(--ink)', background: active===v.id?'var(--accent-wash)':'transparent', fontWeight: active===v.id?600:400 }}>{v.name}</a>
                ))}
              </div>
            )}
          </div>
          <a onClick={()=>go('features')} style={{cursor:'pointer'}}>Product</a>
          <a onClick={()=>go('landing')} style={{cursor:'pointer'}}>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>
      </SOLContainer>
    </header>
  );
};

// ──────────────────────────────────────────────────────────────
// Shared: Vertical hero, pain list, CTA block
// ──────────────────────────────────────────────────────────────
const SOLHero = ({ kicker, title, emphasis, tail, blurb, stat, go }) => (
  <SOLSection className="lnd-pad-96" style={{ padding:'80px 0 56px' }}>
    <SOLContainer>
      <div className="lnd-grid-2" style={{ display:'grid', gridTemplateColumns:'1.1fr .9fr', gap:56, alignItems:'center' }}>
        <div>
          <SOLEyebrow>{kicker}</SOLEyebrow>
          <h1 className="serif" style={{ fontSize:'clamp(40px, 5.4vw, 72px)', margin:'16px 0 18px', fontWeight:400, letterSpacing:'-0.03em', lineHeight:1.02 }}>
            {title} <em style={{ fontStyle:'italic', color:'var(--accent)' }}>{emphasis}</em>{tail}
          </h1>
          <p style={{ fontSize:18, color:'var(--ink-2)', lineHeight:1.55, maxWidth:520, margin:'0 0 28px' }}>{blurb}</p>
          <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
            <button className="btn btn-accent" onClick={()=>go('onboarding')} style={{ padding:'14px 22px', fontSize:15, fontWeight:600 }}>Start 30-day free trial <Icon name="arrow-right" size={14}/></button>
            <button className="btn btn-ghost" onClick={()=>go('features')} style={{ padding:'14px 22px', fontSize:15 }}>See full product</button>
          </div>
          {stat && <div style={{ marginTop:32, display:'flex', gap:32, flexWrap:'wrap' }}>
            {stat.map((s,i) => (
              <div key={i}>
                <div className="serif t-tabular" style={{ fontSize:32, fontWeight:400, letterSpacing:'-0.02em', color:'var(--ink)' }}>{s.v}</div>
                <div style={{ fontSize:12, color:'var(--muted)', marginTop:2 }}>{s.l}</div>
              </div>
            ))}
          </div>}
        </div>
        <div style={{ minHeight:480 }}>{/* hero slot filled by caller */}</div>
      </div>
    </SOLContainer>
  </SOLSection>
);

const SOLPains = ({ eyebrow, title, items }) => (
  <SOLSection className="lnd-pad-96" style={{ padding:'80px 0', background:'var(--paper-2)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)' }}>
    <SOLContainer>
      <div style={{ maxWidth:640, marginBottom:48 }}>
        <SOLEyebrow>{eyebrow}</SOLEyebrow>
        <h2 className="serif" style={{ fontSize:'clamp(32px, 4vw, 52px)', margin:'14px 0 0', fontWeight:400, letterSpacing:'-0.025em', lineHeight:1.05 }}>{title}</h2>
      </div>
      <div className="lnd-grid-3" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20 }}>
        {items.map((p,i) => (
          <div key={i} className="card-paper" style={{ padding:'28px 26px', background:'var(--bg)', border:'1px solid var(--line)', borderRadius:16 }}>
            <div style={{ fontSize:24, marginBottom:12 }}>{p.emoji}</div>
            <div className="serif" style={{ fontSize:20, fontWeight:400, letterSpacing:'-0.015em', marginBottom:8 }}>{p.pain}</div>
            <div style={{ fontSize:13.5, color:'var(--ink-2)', lineHeight:1.55 }}>{p.fix}</div>
            <div style={{ fontSize:11.5, color:'var(--accent)', fontWeight:600, marginTop:12, letterSpacing:'.04em' }}>→ {p.feature}</div>
          </div>
        ))}
      </div>
    </SOLContainer>
  </SOLSection>
);

const SOLFeaturesSplit = ({ eyebrow, title, blurb, bullets, image }) => (
  <SOLSection className="lnd-pad-96" style={{ padding:'96px 0' }}>
    <SOLContainer>
      <div className="lnd-grid-2" style={{ display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:64, alignItems:'center' }}>
        <div>
          <SOLEyebrow>{eyebrow}</SOLEyebrow>
          <h2 className="serif" style={{ fontSize:'clamp(32px, 3.8vw, 48px)', margin:'14px 0 14px', fontWeight:400, letterSpacing:'-0.025em', lineHeight:1.05 }}>{title}</h2>
          <p style={{ fontSize:16, color:'var(--ink-2)', lineHeight:1.55, marginBottom:22 }}>{blurb}</p>
          <ul style={{ listStyle:'none', padding:0, margin:0, display:'grid', gap:10 }}>
            {bullets.map((b,i) => (
              <li key={i} style={{ display:'flex', gap:10, alignItems:'flex-start', fontSize:14.5, color:'var(--ink)' }}>
                <span style={{ width:20, height:20, borderRadius:999, background:'var(--accent-wash)', color:'var(--accent-ink)', display:'grid', placeItems:'center', flexShrink:0, marginTop:1 }}>
                  <Icon name="check" size={11}/>
                </span>
                {b}
              </li>
            ))}
          </ul>
        </div>
        <div>{image}</div>
      </div>
    </SOLContainer>
  </SOLSection>
);

const SOLQuote = ({ text, author, role, venue, city }) => (
  <SOLSection style={{ padding:'80px 0' }}>
    <SOLContainer style={{ maxWidth:860 }}>
      <div className="serif" style={{ fontSize:'clamp(24px, 2.8vw, 34px)', lineHeight:1.3, fontWeight:400, letterSpacing:'-0.01em', color:'var(--ink)' }}>
        "{text}"
      </div>
      <div style={{ marginTop:24, display:'flex', gap:14, alignItems:'center' }}>
        <div style={{ width:44, height:44, borderRadius:999, background:'var(--accent-wash)', color:'var(--accent-ink)', display:'grid', placeItems:'center', fontWeight:600 }}>{author[0]}</div>
        <div>
          <div style={{ fontSize:14, fontWeight:600 }}>{author}</div>
          <div style={{ fontSize:13, color:'var(--muted)' }}>{role} · {venue} · {city}</div>
        </div>
      </div>
    </SOLContainer>
  </SOLSection>
);

const SOLPriceCta = ({ go, vertical, recommend }) => (
  <SOLSection 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)' }}/>
    <SOLContainer style={{ position:'relative' }}>
      <div className="lnd-grid-2" style={{ display:'grid', gridTemplateColumns:'1.1fr .9fr', gap:48, alignItems:'center' }}>
        <div>
          <SOLEyebrow color="var(--accent-3)">For {vertical}</SOLEyebrow>
          <h2 className="serif" style={{ fontSize:'clamp(32px, 4vw, 52px)', margin:'14px 0 14px', fontWeight:400, letterSpacing:'-0.025em', lineHeight:1.05, color:'var(--ink-fixed-on)' }}>
            Try Vividish free<br/>
            <em style={{ fontStyle:'italic', color:'var(--accent-3)' }}>for 30 days.</em>
          </h2>
          <p style={{ fontSize:16, color:'color-mix(in oklch, var(--ink-fixed-on), transparent 28%)', lineHeight:1.55, maxWidth:520 }}>
            No credit card. No per-terminal fees. Full feature set on trial. Cancel any time — keep your menu, your data, your schedule exports.
          </p>
          <div style={{ display:'flex', gap:12, flexWrap:'wrap', marginTop:24 }}>
            <button className="btn" onClick={()=>go('onboarding')} style={{ background:'var(--accent)', color:'#fff', border:0, padding:'14px 24px', fontSize:15, fontWeight:600 }}>Start free trial <Icon name="arrow-right" size={14}/></button>
            <button className="btn" onClick={()=>go('landing')} style={{ background:'transparent', color:'var(--ink-fixed-on)', border:'1px solid color-mix(in oklch, var(--ink-fixed-on), transparent 70%)', padding:'14px 24px', fontSize:15 }}>See full pricing</button>
          </div>
        </div>
        <div style={{ background:'color-mix(in oklch, var(--ink-fixed-on), transparent 94%)', border:'1px solid color-mix(in oklch, var(--ink-fixed-on), transparent 85%)', borderRadius:16, padding:'28px 28px' }}>
          <div style={{ fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--accent-3)', fontWeight:600 }}>Recommended plan</div>
          <div className="serif" style={{ fontSize:44, fontWeight:400, letterSpacing:'-0.02em', marginTop:8, color:'var(--ink-fixed-on)' }}>{recommend.price}<span style={{ fontSize:16, opacity:.65, marginLeft:6 }}>{recommend.per}</span></div>
          <div style={{ fontSize:14, color:'color-mix(in oklch, var(--ink-fixed-on), transparent 35%)', marginTop:6 }}>{recommend.name} — {recommend.blurb}</div>
          <ul style={{ listStyle:'none', padding:0, margin:'20px 0 0', display:'grid', gap:8, fontSize:13.5, color:'color-mix(in oklch, var(--ink-fixed-on), transparent 20%)' }}>
            {recommend.features.map((f,i) => (
              <li key={i} style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
                <span style={{ width:16, height:16, borderRadius:999, background:'rgba(255,255,255,.12)', color:'var(--ink-fixed-on)', display:'grid', placeItems:'center', flexShrink:0, marginTop:2 }}>
                  <Icon name="check" size={9}/>
                </span>
                {f}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </SOLContainer>
  </SOLSection>
);

const SOLFaq = ({ items }) => {
  const [open, setOpen] = useStateSOL(-1);
  return (
    <SOLSection className="lnd-pad-96" style={{ padding:'96px 0', background:'var(--paper-2)', borderTop:'1px solid var(--line)' }}>
      <SOLContainer style={{ maxWidth:820 }}>
        <div style={{ marginBottom:40 }}>
          <SOLEyebrow>FAQ</SOLEyebrow>
          <h2 className="serif" style={{ fontSize:'clamp(30px, 3.6vw, 44px)', margin:'14px 0 0', fontWeight:400, letterSpacing:'-0.025em' }}>Questions we get from operators like you.</h2>
        </div>
        <div style={{ display:'grid', gap:10 }}>
          {items.map((it,i) => (
            <div key={i} style={{ background:'var(--bg)', border:'1px solid var(--line)', borderRadius:12 }}>
              <button onClick={()=>setOpen(open===i?-1:i)} className="lnd-faq-q" style={{ width:'100%', textAlign:'left', padding:'20px 24px', background:'transparent', border:0, color:'var(--ink)', fontSize:16, fontWeight:500, cursor:'pointer', display:'flex', justifyContent:'space-between', alignItems:'center', gap:20 }}>
                <span>{it.q}</span>
                <span style={{ color:'var(--muted)', fontSize:18, flexShrink:0 }}>{open===i?'−':'+'}</span>
              </button>
              {open===i && <div style={{ padding:'0 24px 22px', fontSize:14.5, color:'var(--ink-2)', lineHeight:1.6 }}>{it.a}</div>}
            </div>
          ))}
        </div>
      </SOLContainer>
    </SOLSection>
  );
};

// ──────────────────────────────────────────────────────────────
// MOCKUPS — one custom mockup per vertical
// ──────────────────────────────────────────────────────────────
const MockCafeQueue = () => (
  <div style={{ background:'var(--bg)', border:'1px solid var(--line)', borderRadius:20, padding:22, boxShadow:'var(--shadow-lg)' }}>
    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16 }}>
      <div style={{ fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600 }}>Queue · live</div>
      <div style={{ display:'flex', gap:6, alignItems:'center', fontSize:11, color:'var(--ok)' }}>
        <span style={{ width:6, height:6, borderRadius:999, background:'var(--ok)' }}/>
        Avg 02:14 to ready
      </div>
    </div>
    <div style={{ display:'grid', gap:10 }}>
      {[
        { n:'#0082', name:'Ana',   item:'Flat white · oat', t:'00:42', stage:'Grinding', tint:'var(--warn)' },
        { n:'#0081', name:'Marco', item:'Cortado · 2×',     t:'01:18', stage:'Steaming', tint:'var(--accent)' },
        { n:'#0080', name:'Lena',  item:'Croissant · americano', t:'01:56', stage:'Ready', tint:'var(--ok)' },
        { n:'#0079', name:'Juan',  item:'Iced latte',       t:'02:34', stage:'Picked up', tint:'var(--muted)', done:true },
      ].map((r,i) => (
        <div key={i} style={{ display:'grid', gridTemplateColumns:'64px 1fr auto', gap:14, alignItems:'center', padding:'12px 14px', background: r.done ? 'var(--paper-2)' : 'var(--bg)', border:'1px solid var(--line)', borderRadius:10, opacity: r.done ? .6 : 1 }}>
          <div className="t-tabular" style={{ fontSize:13, fontWeight:600 }}>{r.n}</div>
          <div>
            <div style={{ fontSize:14, fontWeight:500 }}>{r.name}</div>
            <div style={{ fontSize:12, color:'var(--muted)' }}>{r.item}</div>
          </div>
          <div style={{ textAlign:'right' }}>
            <div className="t-tabular" style={{ fontSize:13, color:'var(--muted)' }}>{r.t}</div>
            <div style={{ fontSize:10, letterSpacing:'.08em', textTransform:'uppercase', fontWeight:600, color: r.tint, marginTop:2 }}>{r.stage}</div>
          </div>
        </div>
      ))}
    </div>
    <div style={{ marginTop:14, padding:'12px 14px', background:'var(--accent-wash)', borderRadius:10, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
      <div>
        <div style={{ fontSize:11, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--accent-ink)', fontWeight:600 }}>Tip jar</div>
        <div className="t-tabular serif" style={{ fontSize:22, fontWeight:400, marginTop:2, color:'var(--accent-ink)' }}>€18.40 / 11 taps</div>
      </div>
      <div style={{ fontSize:12, color:'var(--accent-ink)' }}>Split 3 ways at close</div>
    </div>
  </div>
);

const MockRestaurantTable = () => (
  <div style={{ background:'var(--bg)', border:'1px solid var(--line)', borderRadius:20, padding:0, boxShadow:'var(--shadow-lg)', overflow:'hidden' }}>
    <div style={{ padding:'18px 22px', borderBottom:'1px solid var(--line)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
      <div>
        <div style={{ fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600 }}>Table 07 · Anna</div>
        <div className="serif" style={{ fontSize:22, fontWeight:400, marginTop:4 }}>Party of 4 · 19:45</div>
      </div>
      <div style={{ fontSize:11, color:'var(--ok)', background:'color-mix(in oklch, var(--ok), transparent 86%)', padding:'4px 10px', borderRadius:99, fontWeight:600 }}>Main course</div>
    </div>
    <div style={{ padding:'14px 22px' }}>
      <div style={{ fontSize:10, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600, marginBottom:10 }}>Course 2 · Mains</div>
      {[
        { item:'Pulpo a la gallega', g:'Seat 1',  note:'No pimentón', s:'Fired' },
        { item:'Secreto ibérico',    g:'Seat 2',  note:'Med-rare',    s:'Fired' },
        { item:'Berenjenas con miel',g:'Seat 3',  note:'Veggie',       s:'Plating' },
        { item:'Cordero lechal',     g:'Seat 4',  note:'—',            s:'On pass' },
      ].map((r,i) => (
        <div key={i} style={{ display:'grid', gridTemplateColumns:'1fr auto', gap:14, padding:'10px 0', borderTop: i?'1px solid var(--line)':0 }}>
          <div>
            <div style={{ fontSize:14, fontWeight:500 }}>{r.item}</div>
            <div style={{ fontSize:12, color:'var(--muted)' }}>{r.g} · {r.note}</div>
          </div>
          <div style={{ fontSize:10, letterSpacing:'.08em', textTransform:'uppercase', fontWeight:600, color: r.s==='On pass'?'var(--accent)':r.s==='Plating'?'var(--warn)':'var(--muted)', alignSelf:'center' }}>{r.s}</div>
        </div>
      ))}
    </div>
    <div style={{ padding:'14px 22px', borderTop:'1px solid var(--line)', background:'var(--paper-2)', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14 }}>
      {[
        { l:'Cover time', v:'1h 12m' },
        { l:'Turn on T07', v:'2.4 /day' },
        { l:'Server avg', v:'€42 / head' },
      ].map((s,i) => (
        <div key={i}>
          <div style={{ fontSize:10, color:'var(--muted)', letterSpacing:'.06em', textTransform:'uppercase', fontWeight:600 }}>{s.l}</div>
          <div className="t-tabular serif" style={{ fontSize:16, fontWeight:400, marginTop:2 }}>{s.v}</div>
        </div>
      ))}
    </div>
  </div>
);

const MockBarTabs = () => (
  <div style={{ background:'var(--bg)', border:'1px solid var(--line)', borderRadius:20, boxShadow:'var(--shadow-lg)', overflow:'hidden' }}>
    <div style={{ padding:'18px 22px', borderBottom:'1px solid var(--line)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
      <div>
        <div style={{ fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600 }}>Open tabs · Saturday 23:14</div>
        <div className="serif" style={{ fontSize:22, fontWeight:400, marginTop:4 }}>14 tabs open · €342.50</div>
      </div>
      <div style={{ fontSize:11, color:'var(--warn)', background:'color-mix(in oklch, var(--warn), transparent 86%)', padding:'4px 10px', borderRadius:99, fontWeight:600 }}>Last call · 00:45</div>
    </div>
    <div style={{ padding:'12px 22px' }}>
      {[
        { id:'T-14', card:'VISA ·· 4421', items:6, t:'22:48', v:'€48.50', age:'21' },
        { id:'T-13', card:'Amex ·· 0033', items:4, t:'22:31', v:'€32.00', age:'—', flag:true },
        { id:'T-11', card:'VISA ·· 1188', items:9, t:'21:56', v:'€71.20', age:'27' },
        { id:'T-09', card:'Cash',         items:3, t:'21:40', v:'€21.00', age:'—' },
      ].map((r,i) => (
        <div key={i} style={{ display:'grid', gridTemplateColumns:'56px 1fr auto auto', gap:14, alignItems:'center', padding:'12px 0', borderTop: i?'1px solid var(--line)':0 }}>
          <div className="t-tabular" style={{ fontSize:13, fontWeight:600, color:'var(--accent)' }}>{r.id}</div>
          <div>
            <div style={{ fontSize:13.5, fontWeight:500 }}>{r.card}</div>
            <div style={{ fontSize:11.5, color:'var(--muted)' }}>{r.items} items · opened {r.t}{r.flag && ' · 🛡️ ID not verified'}</div>
          </div>
          <div style={{ fontSize:11, color: r.age==='—'?'var(--danger)':'var(--muted)', fontWeight: r.age==='—'?600:400 }}>{r.age==='—'?'✗ ID':'✓ '+r.age}</div>
          <div className="t-tabular serif" style={{ fontSize:16, fontWeight:400 }}>{r.v}</div>
        </div>
      ))}
    </div>
    <div style={{ padding:'14px 22px', borderTop:'1px solid var(--line)', background:'var(--paper-2)' }}>
      <div style={{ fontSize:10, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600, marginBottom:8 }}>Happy hour ending in</div>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div className="t-tabular serif" style={{ fontSize:20, fontWeight:400 }}>00:14:32</div>
        <div style={{ fontSize:11, color:'var(--accent)' }}>Spritz €6 → €9 at midnight</div>
      </div>
    </div>
  </div>
);

const MockBakeryProduction = () => (
  <div style={{ background:'var(--bg)', border:'1px solid var(--line)', borderRadius:20, boxShadow:'var(--shadow-lg)', overflow:'hidden' }}>
    <div style={{ padding:'18px 22px', borderBottom:'1px solid var(--line)' }}>
      <div style={{ fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600 }}>Production · Thu Apr 23</div>
      <div className="serif" style={{ fontSize:22, fontWeight:400, marginTop:4 }}>Bake schedule · 04:30 start</div>
    </div>
    <div style={{ padding:'8px 22px 14px' }}>
      {[
        { t:'04:30', item:'Sourdough boule',    qty:'24 loaves', b:'B2B · Hotel Miró', done:true },
        { t:'05:00', item:'Butter croissant',   qty:'60 pcs',    b:'Walk-in + 3 pre-orders', done:true },
        { t:'05:45', item:'Pain au chocolat',   qty:'40 pcs',    b:'Walk-in', now:true },
        { t:'06:30', item:'Rye loaf',           qty:'12 loaves', b:'B2B · Café Luna' },
        { t:'07:00', item:'Brioche',            qty:'30 pcs',    b:'Walk-in + wholesale' },
      ].map((r,i) => (
        <div key={i} style={{ display:'grid', gridTemplateColumns:'54px 1fr auto', gap:14, alignItems:'center', padding:'10px 0', borderTop: i?'1px solid var(--line)':0, opacity: r.done?.55:1 }}>
          <div className="t-tabular" style={{ fontSize:13, fontWeight:600, color: r.now?'var(--accent)':r.done?'var(--muted)':'var(--ink)' }}>{r.t}</div>
          <div>
            <div style={{ fontSize:13.5, fontWeight:500, textDecoration: r.done?'line-through':'none' }}>{r.item}</div>
            <div style={{ fontSize:11.5, color:'var(--muted)' }}>{r.qty} · {r.b}</div>
          </div>
          <div style={{ fontSize:10, letterSpacing:'.08em', textTransform:'uppercase', fontWeight:600, color: r.now?'var(--accent)':r.done?'var(--ok)':'var(--muted)' }}>{r.now?'In oven':r.done?'Done':'Next'}</div>
        </div>
      ))}
    </div>
    <div style={{ padding:'14px 22px', borderTop:'1px solid var(--line)', background:'var(--paper-2)', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14 }}>
      {[
        { l:'Pre-orders', v:'18' },
        { l:'B2B today',  v:'€412' },
        { l:'Flour left', v:'22 kg' },
      ].map((s,i) => (
        <div key={i}>
          <div style={{ fontSize:10, color:'var(--muted)', letterSpacing:'.06em', textTransform:'uppercase', fontWeight:600 }}>{s.l}</div>
          <div className="t-tabular serif" style={{ fontSize:16, fontWeight:400, marginTop:2 }}>{s.v}</div>
        </div>
      ))}
    </div>
  </div>
);

const MockGroupsRollup = () => (
  <div style={{ background:'var(--bg)', border:'1px solid var(--line)', borderRadius:20, boxShadow:'var(--shadow-lg)', overflow:'hidden' }}>
    <div style={{ padding:'18px 22px', borderBottom:'1px solid var(--line)', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
      <div>
        <div style={{ fontSize:11, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600 }}>Group rollup · last 7 days</div>
        <div className="serif" style={{ fontSize:22, fontWeight:400, marginTop:4 }}>Casa Lupe group · 6 venues</div>
      </div>
      <div style={{ fontSize:11, color:'var(--ok)', fontWeight:500 }}>€84,241 · ↑ +11.4%</div>
    </div>
    <div style={{ padding:'8px 22px 14px' }}>
      {[
        { v:'Bilbao · Casco Viejo', r:'€18,420', d:'+14%', u:true,  staff:'12', c:'91%' },
        { v:'Bilbao · Indautxu',    r:'€14,182', d:'+8%',  u:true,  staff:'9',  c:'88%' },
        { v:'San Sebastián',        r:'€16,004', d:'+21%', u:true,  staff:'11', c:'94%' },
        { v:'Madrid · Chamberí',    r:'€17,822', d:'-3%',  u:false, staff:'14', c:'82%' },
        { v:'Madrid · Malasaña',    r:'€10,441', d:'+6%',  u:true,  staff:'8',  c:'87%' },
        { v:'Barcelona · Gràcia',   r:'€7,372',  d:'+18%', u:true,  staff:'6',  c:'93%' },
      ].map((r,i) => (
        <div key={i} style={{ display:'grid', gridTemplateColumns:'1.2fr 90px 70px 50px 60px', gap:14, alignItems:'center', padding:'10px 0', borderTop: i?'1px solid var(--line)':0 }}>
          <div style={{ fontSize:13, fontWeight:500 }}>{r.v}</div>
          <div className="t-tabular serif" style={{ fontSize:15, textAlign:'right', fontWeight:400 }}>{r.r}</div>
          <div className="t-tabular" style={{ fontSize:12, color: r.u?'var(--ok)':'var(--danger)', textAlign:'right', fontWeight:500 }}>{r.u?'↑':'↓'} {r.d}</div>
          <div className="t-tabular" style={{ fontSize:12, color:'var(--muted)', textAlign:'right' }}>{r.staff}p</div>
          <div className="t-tabular" style={{ fontSize:12, color: parseInt(r.c)>=90?'var(--ok)':'var(--muted)', textAlign:'right', fontWeight:500 }}>{r.c}</div>
        </div>
      ))}
    </div>
    <div style={{ padding:'14px 22px', borderTop:'1px solid var(--line)', background:'var(--paper-2)', display:'flex', justifyContent:'space-between', fontSize:11, color:'var(--muted)' }}>
      <span>Columns: venue · revenue · vs last week · staff · menu-sync health</span>
      <span style={{ color:'var(--accent)', fontWeight:600 }}>Export CSV ↗</span>
    </div>
  </div>
);

// ──────────────────────────────────────────────────────────────
// 1) CAFÉS
// ──────────────────────────────────────────────────────────────
const SolutionCafes = ({ go, theme, setTheme }) => {
  const Footer = window.LND_Footer;
  return (
    <div data-screen-label="Solutions · Cafés" data-sol-root style={{ minHeight:'100%', background:'var(--bg)' }} className="lnd-scroll">
      <SOLNav go={go} active="cafes"/>
      <SOLHero
        kicker="For cafés"
        title="Pull a drink in "
        emphasis="under two minutes"
        tail=","
        blurb="Without dropping a receipt, forgetting an oat-milk swap, or losing the tip split. Vividish gives your baristas a register that thinks like a queue and a till that closes itself."
        stat={[
          { v:'<2m', l:'Avg queue time' },
          { v:'+23%', l:'Tip uptake' },
          { v:'04:50', l:'End-of-day close' },
        ]}
        go={go}
      />
      <SOLContainer style={{ marginTop:-420, paddingBottom:0, position:'relative', zIndex:1 }}>
        <div style={{ maxWidth:520, marginLeft:'auto', marginRight:0 }}>
          <MockCafeQueue/>
        </div>
      </SOLContainer>
      <div style={{ height:40 }}/>

      <SOLPains
        eyebrow="Built for morning rush"
        title="The four things that kill a good café service."
        items={[
          { emoji:'⏱️', pain:'The 08:30 queue',         fix:'Pre-entered drink combos, modifier shortcuts, and a live queue display so guests see where they stand.',                feature:'Register + queue display' },
          { emoji:'🥛', pain:'Milk swaps get lost',     fix:'Oat, almond, lactose-free — one tap per modifier, printed with the ticket, visible on the bar screen.',                  feature:'Modifiers + kitchen display' },
          { emoji:'💶', pain:'Tip splits take 20 min',  fix:'Card tips pool live, split by hours worked at close. Baristas see their share before they leave.',                        feature:'Tip pool · timesheet-linked' },
          { emoji:'🧾', pain:'Loyalty on paper cards',  fix:'Digital punch card on a phone number. Tenth coffee free, automatically, no app download.',                                feature:'Loyalty · phone-number lookup' },
          { emoji:'🚚', pain:'Milk you forgot to order',fix:'Par levels on oat, whole, almond — we warn you at close-of-day when tomorrow looks tight.',                              feature:'Inventory · par thresholds' },
          { emoji:'📱', pain:'Grab-and-go orders',      fix:'QR on the counter. Guest pre-orders, pays, picks up. No queue. Barista sees it on the same screen.',                       feature:'QR ordering · pickup mode' },
        ]}
      />

      <SOLFeaturesSplit
        eyebrow="The register"
        title="Built for speed, not for committees."
        blurb="A flat key grid instead of nested menus. Your three top drinks are one tap. Modifiers are one more. A new barista is productive on day one."
        bullets={[
          'Single-tap favourites — coffee, flat white, cortado, cappuccino',
          'Modifier stacks: milk, shot count, syrup, cup size — printed with the ticket',
          'Card + cash + Bizum. Daily close in a single screen.',
          'Tip prompts that work: €1 · €2 · 5% · 10% on screen after every transaction',
          'End-of-day report mailed automatically at close',
        ]}
        image={<div style={{ background:'var(--paper-2)', border:'1px solid var(--line)', borderRadius:20, padding:20 }}>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:8 }}>
            {['Espresso','Americano','Flat white','Cortado','Cappuccino','Latte','Macchiato','Mocha','Iced latte','Croissant','Muffin','Sandwich'].map((n,i)=>(
              <div key={i} style={{ aspectRatio:'1', background:'var(--bg)', border:'1px solid var(--line)', borderRadius:10, padding:10, display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
                <div style={{ fontSize:11.5, fontWeight:500, lineHeight:1.2 }}>{n}</div>
                <div className="t-tabular" style={{ fontSize:12, color:'var(--muted)' }}>€{(2.2+i*.2).toFixed(2)}</div>
              </div>
            ))}
          </div>
        </div>}
      />

      <SOLQuote
        text="We used to close at 20:00 and finish the till at 20:45. Now we're home at 20:10. The tip split alone saved us a fight a week."
        author="Lucía Márquez" role="Owner" venue="Café Luna" city="Bilbao"
      />

      <SOLPriceCta
        go={go} vertical="cafés"
        recommend={{ name:'Growth', price:'€49', per:'/ month', blurb:'single café, up to 3 terminals', features:['Menu + AI photos','Kitchen display','QR pickup','Tip pool + payroll','Loyalty punch card','Email + chat support'] }}
      />

      <SOLFaq items={[
        { q:'Can I run two terminals — one at the counter, one on the bar?', a:'Yes. Growth includes up to 3 terminals. They sync in real time so the bar sees tickets as the counter rings them up.' },
        { q:'Does the tip pool handle card tips correctly?',                  a:'Card tips pool by default, split by hours worked at close. Cash tips can stay with individual baristas or pool — your call, per shift.' },
        { q:'Do my guests need an app for loyalty?',                          a:'No. A phone number at the till is the punch card. Tenth drink free, automatic. Works even when the guest forgot their wallet.' },
        { q:'Can I take orders ahead of opening?',                            a:'Yes — enable pickup-ahead on your QR. Guests order and pay from home; you see them in the queue when you unlock the door.' },
        { q:'What about wholesale beans or B2B accounts?',                    a:'Standard on Growth. Invoice-based accounts with net-7 / net-14 terms and monthly statements.' },
      ]}/>

      {Footer && <Footer/>}
    </div>
  );
};

// ──────────────────────────────────────────────────────────────
// 2) RESTAURANTS
// ──────────────────────────────────────────────────────────────
const SolutionRestaurants = ({ go, theme, setTheme }) => {
  const Footer = window.LND_Footer;
  return (
    <div data-screen-label="Solutions · Restaurants" data-sol-root style={{ minHeight:'100%', background:'var(--bg)' }} className="lnd-scroll">
      <SOLNav go={go} active="restaurants"/>
      <SOLHero
        kicker="For full-service restaurants"
        title="Every course, every cover, every "
        emphasis="critical moment"
        tail=","
        blurb="From the moment the party walks in to the last plate out — Vividish keeps the front of house, the pass, and the books speaking the same language."
        stat={[
          { v:'2.4×', l:'Table turn / service' },
          { v:'11m', l:'Faster to the pass' },
          { v:'€42', l:'Higher avg / head' },
        ]}
        go={go}
      />
      <SOLContainer style={{ marginTop:-460, paddingBottom:0, position:'relative', zIndex:1 }}>
        <div style={{ maxWidth:520, marginLeft:'auto', marginRight:0 }}>
          <MockRestaurantTable/>
        </div>
      </SOLContainer>
      <div style={{ height:40 }}/>

      <SOLPains
        eyebrow="Built for dinner service"
        title="The six places a restaurant loses money without noticing."
        items={[
          { emoji:'📅', pain:'Empty Tuesdays, full Saturdays',      fix:'Reservation rules that open tables dynamically. Deposit on peak nights. Automatic waitlist SMS.',               feature:'Reservations + waitlist' },
          { emoji:'🍽️', pain:'Courses out of sync',                fix:'Fire-by-course kitchen display. The pass sees what\'s next, not just what was ordered.',                         feature:'KDS · course-paced' },
          { emoji:'🍷', pain:'Wine pairings never sold',            fix:'Every dish can suggest a glass on the tablet. Server taps "pair" — that\'s a €9 upsell per cover.',              feature:'Menu studio · pairings' },
          { emoji:'🥩', pain:'86\'d items still on the menu',       fix:'Out-of-stock toggles hide the dish everywhere — menu, QR, tablet — in one tap. No more apologies.',             feature:'Inventory sync' },
          { emoji:'👥', pain:'Server performance is a guess',       fix:'Cover time, up-sell rate, avg check per server, complaint rate. See who needs training, who deserves a raise.', feature:'Analytics · server breakdown' },
          { emoji:'💳', pain:'Splitting the bill is a nightmare',   fix:'Split by seat, by item, by share. QR on the receipt — each guest pays their own on their phone.',                feature:'Split pay · guest-side' },
        ]}
      />

      <SOLFeaturesSplit
        eyebrow="The kitchen display"
        title="Your pass, faster."
        blurb="Tickets grouped by table, sorted by course, highlighted by age. Chef sees exactly what needs to fire next. Station-level filtering means the grill doesn't scroll through the cold section."
        bullets={[
          'Fire-by-course: appetisers held until mains are ordered, on request',
          'Station filters: grill, cold, pastry, plancha — each sees only their tickets',
          'Allergen callouts in red banners per dish',
          'Bump-back when a cover complains — full audit trail',
          'Tonight\'s 86 list visible on every ticket in the station colour',
        ]}
        image={<MockRestaurantTable/>}
      />

      <SOLFeaturesSplit
        eyebrow="The floor plan"
        title="Know the room at a glance."
        blurb="Table status, cover time per party, server assignment, course they\'re on. Tap a table to see the ticket, the notes, the allergies. Drag to move a party. Right-click to close out."
        bullets={[
          'Color-coded by status: seated, ordered, firing, dessert, paid',
          'Cover-time warning when a table exceeds its average turn',
          'Server assignment drag-and-drop — new server inherits the tab',
          'Occupancy vs. capacity chart for the week at a glance',
        ]}
        image={<div style={{ background:'var(--paper-2)', border:'1px solid var(--line)', borderRadius:20, padding:20 }}>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:10 }}>
            {Array.from({length:20}, (_,i) => {
              const status = [0,3,5,9,12,15][i%6] === i%6 ? 'free' : ['seated','firing','dessert','paid'][i%4];
              const colors = { free:'var(--paper-2)', seated:'var(--warn)', firing:'var(--accent)', dessert:'var(--ok)', paid:'var(--muted)' };
              return (
                <div key={i} style={{ aspectRatio:'1', background:'var(--bg)', border:`2px solid ${colors[status] || 'var(--line)'}`, borderRadius:10, padding:8, display:'flex', flexDirection:'column', justifyContent:'space-between' }}>
                  <div style={{ fontSize:10, fontWeight:600, color:'var(--muted)' }}>T{String(i+1).padStart(2,'0')}</div>
                  <div style={{ fontSize:9, color: colors[status], fontWeight:600, textTransform:'uppercase', letterSpacing:'.04em' }}>{status}</div>
                </div>
              );
            })}
          </div>
        </div>}
      />

      <SOLQuote
        text="Fire-by-course alone changed our Saturday. Before, the grill was slammed with starters and mains at the same time. Now the pass actually paces itself."
        author="Íñigo Bastida" role="Chef-owner" venue="Casa Lupe" city="San Sebastián"
      />

      <SOLPriceCta
        go={go} vertical="restaurants"
        recommend={{ name:'Growth', price:'€49', per:'/ month', blurb:'single venue, up to 3 terminals', features:['Reservations + waitlist','Kitchen display by station','Menu studio + wine pairings','Inventory + 86 sync','Server-level analytics','Split-pay on guest QR'] }}
      />

      <SOLFaq items={[
        { q:'Can I integrate my existing reservation system?',     a:'Yes — we import from TheFork, OpenTable, and Google Reserve. Or migrate entirely in under an hour.' },
        { q:'Does the KDS work with non-Vividish printers?',       a:'We support any ESC/POS printer over Wi-Fi or network. No proprietary hardware required.' },
        { q:'How do you handle allergens?',                        a:'Every menu item has an allergen matrix. On the KDS, flagged orders show a red banner. The server-side tablet prompts confirmation before firing.' },
        { q:'What about deposits and no-shows?',                   a:'Rule-based: parties over N guests or specific days trigger a card pre-auth. Auto-release after the dinner. Charge only on no-show.' },
        { q:'Can my sommelier build a wine list that syncs?',      a:'Wine list lives in the menu studio. Pair any dish with up to 3 glass recommendations. The server sees them inline when firing the course.' },
      ]}/>

      {Footer && <Footer/>}
    </div>
  );
};

// ──────────────────────────────────────────────────────────────
// 3) BARS
// ──────────────────────────────────────────────────────────────
const SolutionBars = ({ go, theme, setTheme }) => {
  const Footer = window.LND_Footer;
  return (
    <div data-screen-label="Solutions · Bars" data-sol-root style={{ minHeight:'100%', background:'var(--bg)' }} className="lnd-scroll">
      <SOLNav go={go} active="bars"/>
      <SOLHero
        kicker="For bars & cocktail venues"
        title="Run Saturday night without "
        emphasis="losing a tab"
        tail="."
        blurb="Pre-authorised cards, one-tap happy-hour pricing, last-call inventory, ID-check flows, and splits that actually split. Your bartenders pour. Vividish counts."
        stat={[
          { v:'€0', l:'Lost tabs this month' },
          { v:'00:35', l:'Avg close-out / tab' },
          { v:'+18%', l:'Cocktail attach rate' },
        ]}
        go={go}
      />
      <SOLContainer style={{ marginTop:-460, paddingBottom:0, position:'relative', zIndex:1 }}>
        <div style={{ maxWidth:520, marginLeft:'auto', marginRight:0 }}>
          <MockBarTabs/>
        </div>
      </SOLContainer>
      <div style={{ height:40 }}/>

      <SOLPains
        eyebrow="Built for late night"
        title="Where bars bleed money after midnight."
        items={[
          { emoji:'💳', pain:'Walk-out tabs',            fix:'Pre-auth a card the moment the tab opens. If they walk, the charge is already authorised.',                               feature:'Tab pre-auth · €1 hold' },
          { emoji:'🕐', pain:'Happy hour creep',         fix:'One-tap toggle. Prices change at exactly 18:00 and flip back at exactly 20:00. On every ticket, every screen.',            feature:'Time-based pricing' },
          { emoji:'🆔', pain:'ID checks slow the bar',   fix:'Scan a passport, DL, or NIE. Age, expiration, validity — one second. Blocks under-18 from going in the till.',             feature:'ID scan · built-in' },
          { emoji:'🍸', pain:'Cocktail recipes vary',    fix:'Every cocktail has a recipe card on the bar screen. Junior bartender pours like your senior — the first time.',            feature:'Recipe cards · photo + pour' },
          { emoji:'🥃', pain:'Last-call inventory',      fix:'At 23:45, a report tells you what to push and what to pull. Stock-outs reach the menu before a guest orders them.',         feature:'Live stock + push list' },
          { emoji:'🧾', pain:'Three friends, one card',  fix:'Split by seat, by drink, by share — on the guest\'s own phone. No mental maths at 02:00.',                                  feature:'Split pay · guest-side' },
        ]}
      />

      <SOLFeaturesSplit
        eyebrow="Happy hour"
        title="Time-based pricing that isn't a guess."
        blurb="Set your rule once: Spritz €6 between 18:00 and 20:00. The price is live on the bar screen, on the guest QR, and on the receipt. Flips back at exactly 20:00. Zero mental load."
        bullets={[
          'Rules by hour, by day, by drink, by menu section',
          'Ladies\' night, industry night, Sunday jazz — all schedulable',
          'Countdown banner on every screen: "Happy hour ends in 00:12:00"',
          'After close: Happy-hour attach rate, revenue impact, cost/benefit',
        ]}
        image={<div style={{ background:'var(--paper-2)', border:'1px solid var(--line)', borderRadius:20, padding:22 }}>
          <div style={{ fontSize:10, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600, marginBottom:14 }}>Pricing rules · active</div>
          {[
            { name:'Happy hour · beer + spritz', window:'Mon–Fri · 18:00 → 20:00', off:'-30%', on:true },
            { name:'Late night · all cocktails', window:'Fri–Sat · 23:00 → 02:00', off:'-20%', on:true },
            { name:'Industry night · wine',       window:'Sun · 20:00 → 23:00',     off:'-50%', on:false },
            { name:'Sunday jazz · highballs',     window:'Sun · 17:00 → 19:00',     off:'-25%', on:false },
          ].map((r,i) => (
            <div key={i} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'12px 0', borderTop: i?'1px solid var(--line)':0 }}>
              <div>
                <div style={{ fontSize:13.5, fontWeight:500 }}>{r.name}</div>
                <div style={{ fontSize:11, color:'var(--muted)' }}>{r.window}</div>
              </div>
              <div style={{ display:'flex', gap:10, alignItems:'center' }}>
                <div className="t-tabular" style={{ fontSize:14, fontWeight:600, color: r.on?'var(--accent)':'var(--muted)' }}>{r.off}</div>
                <div style={{ width:36, height:20, borderRadius:99, background: r.on?'var(--accent)':'var(--line)', position:'relative', transition:'.2s' }}>
                  <div style={{ position:'absolute', top:2, left: r.on?18:2, width:16, height:16, borderRadius:99, background:'#fff', transition:'.2s' }}/>
                </div>
              </div>
            </div>
          ))}
        </div>}
      />

      <SOLQuote
        text="Pre-auth on the tab and guest-side split — those two features alone pay for the subscription five times over. No more three-drink walkouts on Saturdays."
        author="Tomás Rivera" role="Head bartender" venue="Bar Bilbao" city="Bilbao"
      />

      <SOLPriceCta
        go={go} vertical="bars"
        recommend={{ name:'Growth', price:'€49', per:'/ month', blurb:'single bar, up to 3 terminals', features:['Tab pre-auth','Time-based pricing','ID scan + age check','Cocktail recipe cards','Live inventory + push list','Guest-side split pay'] }}
      />

      <SOLFaq items={[
        { q:'Do tab pre-auths actually work in Spain / Germany?',    a:'Yes, supported by all major processors we integrate with (Stripe, Adyen, SumUp). Pre-auth is €1; real charge captures at close.' },
        { q:'Can I run both guest-side and bartender-side splits?',   a:'Both. Bartender splits on screen for regulars; QR on the receipt for guests who\'d rather sort it out themselves.' },
        { q:'What IDs does the scanner read?',                        a:'EU passports, national IDs, driving licences, and NIE cards. Reads the MRZ or barcode. Works offline.' },
        { q:'Happy hour and fixed-price menus together?',            a:'Yes — they compose. Happy-hour discount applies on top of a pre-fixed menu\'s drink section, if configured.' },
        { q:'Can I run events with cover-charge + free drink token?', a:'Event mode issues digital tokens on the guest\'s phone when they pay the cover. Redeemable at the bar, one tap.' },
      ]}/>

      {Footer && <Footer/>}
    </div>
  );
};

// ──────────────────────────────────────────────────────────────
// 4) BAKERIES
// ──────────────────────────────────────────────────────────────
const SolutionBakeries = ({ go, theme, setTheme }) => {
  const Footer = window.LND_Footer;
  return (
    <div data-screen-label="Solutions · Bakeries" data-sol-root style={{ minHeight:'100%', background:'var(--bg)' }} className="lnd-scroll">
      <SOLNav go={go} active="bakeries"/>
      <SOLHero
        kicker="For bakeries"
        title="Bake what "
        emphasis="sells,"
        tail=" not what sits."
        blurb="A bakery is half oven, half wholesale, half counter. Vividish runs the production schedule, the pre-order book, the B2B accounts, and the shop till — on one screen."
        stat={[
          { v:'-34%', l:'Waste at close' },
          { v:'04:30', l:'First bake on time' },
          { v:'€1.4k', l:'B2B orders / week' },
        ]}
        go={go}
      />
      <SOLContainer style={{ marginTop:-460, paddingBottom:0, position:'relative', zIndex:1 }}>
        <div style={{ maxWidth:520, marginLeft:'auto', marginRight:0 }}>
          <MockBakeryProduction/>
        </div>
      </SOLContainer>
      <div style={{ height:40 }}/>

      <SOLPains
        eyebrow="Built for 04:30"
        title="What makes a bakery hard — and how we fix it."
        items={[
          { emoji:'🌾', pain:'Production vs. guesswork',  fix:'Bake schedule is generated from yesterday\'s sell-through, pre-orders, and day-of-week demand. You tweak, you don\'t start blank.', feature:'AI bake plan' },
          { emoji:'📞', pain:'Phone-order chaos',         fix:'Pre-orders come in by WhatsApp, phone, or web. One inbox, one confirmation flow. Pickup time visible on tomorrow\'s plan.',       feature:'Pre-order inbox' },
          { emoji:'🏨', pain:'B2B invoicing by hand',     fix:'Hotels, cafés, restaurants — each with net-7 or net-14 terms. Monthly statements. No spreadsheet. No chasing.',                    feature:'B2B accounts · auto-invoice' },
          { emoji:'🔥', pain:'Oven bottleneck',          fix:'Schedule shows oven capacity in live heat-map. Re-drag a batch to a different slot — everything recalculates.',                     feature:'Production schedule' },
          { emoji:'🥖', pain:'End-of-day markdown',       fix:'At 17:30, auto-flag everything over N hours old. -30% tag prints. Guest QR shows markdown section. Waste drops.',                   feature:'Auto-markdown rules' },
          { emoji:'♻️', pain:'Flour you didn\'t realise was low', fix:'Recipes know their ingredients. Tomorrow\'s schedule deducts from live stock. We flag short-stock at 18:00.',            feature:'Recipe-linked inventory' },
        ]}
      />

      <SOLFeaturesSplit
        eyebrow="The B2B book"
        title="Wholesale that runs itself."
        blurb="Each B2B customer has their order pattern, their price list, their payment terms, their delivery window. Recurring orders auto-populate the production schedule every night. Invoices go out monthly without you touching them."
        bullets={[
          'Per-customer price lists — hotels buy cheaper than cafés, cafés cheaper than retail',
          'Recurring order templates: "Hotel Miró wants 24 boules Mon-Fri, 12 on Sat"',
          'Delivery slots and driver routes visible alongside production',
          'Automatic monthly statements PDF + email on the 1st',
          'Stripe / SEPA direct debit for collection',
        ]}
        image={<div style={{ background:'var(--paper-2)', border:'1px solid var(--line)', borderRadius:20, padding:22 }}>
          <div style={{ fontSize:10, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600, marginBottom:14 }}>B2B customers · last 30 days</div>
          {[
            { name:'Hotel Miró',       r:'€1,420', terms:'Net 14', due:'€420', late:false },
            { name:'Café Luna',        r:'€882',   terms:'Net 7',  due:'€0',   late:false },
            { name:'Restaurante Lupe', r:'€1,204', terms:'Net 14', due:'€604', late:true },
            { name:'Pension Etxea',    r:'€322',   terms:'Net 30', due:'€322', late:false },
          ].map((r,i) => (
            <div key={i} style={{ display:'grid', gridTemplateColumns:'1fr 80px 70px 60px', gap:12, padding:'12px 0', borderTop: i?'1px solid var(--line)':0, alignItems:'center' }}>
              <div style={{ fontSize:13, fontWeight:500 }}>{r.name}</div>
              <div className="t-tabular" style={{ fontSize:13, textAlign:'right' }}>{r.r}</div>
              <div style={{ fontSize:11, color:'var(--muted)', textAlign:'right' }}>{r.terms}</div>
              <div className="t-tabular" style={{ fontSize:12, color: r.late?'var(--danger)':'var(--muted)', textAlign:'right', fontWeight: r.late?600:400 }}>{r.due}{r.late?' ⚠':''}</div>
            </div>
          ))}
        </div>}
      />

      <SOLFeaturesSplit
        eyebrow="The production schedule"
        title="Start baking, don\'t start thinking."
        blurb="Arrive at 04:00. The schedule is already on the oven screen. Ticks the batch off as it comes out. Next batch starts itself in a timer. You bake. The schedule runs the floor."
        bullets={[
          'Printable paper version for the baker who prefers it',
          'Oven-level heat-map: capacity vs. planned use, per slot',
          'Actual vs. planned time tracking — spot bottleneck batches',
          'Drag to reorder, system re-plans the rest automatically',
        ]}
        image={<MockBakeryProduction/>}
      />

      <SOLQuote
        text="Before Vividish we threw away 15% of the day\'s bake. With production-linked inventory and the markdown flow, we\'re at 4%. That\'s our rent, every month."
        author="Andrea Lanz" role="Owner" venue="Bäckerei Lanz" city="München"
      />

      <SOLPriceCta
        go={go} vertical="bakeries"
        recommend={{ name:'Growth', price:'€49', per:'/ month', blurb:'single bakery, up to 3 terminals', features:['AI bake schedule','Pre-order inbox','B2B accounts + auto-invoice','Recipe-linked inventory','Auto-markdown rules','QR ordering + pickup ahead'] }}
      />

      <SOLFaq items={[
        { q:'Can you handle per-hotel price lists?',                 a:'Yes. Each B2B customer gets their own price list, payment terms, and delivery window. Monthly statement PDF goes out automatically.' },
        { q:'How does the bake schedule learn?',                     a:'It reads the last 8 weeks of sell-through by day and by weather. You tweak; it re-learns your adjustments for next week.' },
        { q:'Do you integrate with DATEV / accounting software?',   a:'We export DATEV-format CSVs nightly and have live exports to Xero, QuickBooks, and Holded. SEPA direct debit collection built in.' },
        { q:'Can a guest pre-order a cake for a birthday?',         a:'Yes — custom-order flow on the QR. Photo, notes, pickup slot. Lands in the pre-order inbox with a deposit taken if you want one.' },
        { q:'What about markdown at the end of the day?',           a:'Rule-based: "after 17:30, everything baked before 08:00 goes -30%". Tags print; guest QR shows markdown; your waste report drops.' },
      ]}/>

      {Footer && <Footer/>}
    </div>
  );
};

// ──────────────────────────────────────────────────────────────
// 5) MULTI-LOCATION GROUPS
// ──────────────────────────────────────────────────────────────
const SolutionGroups = ({ go, theme, setTheme }) => {
  const Footer = window.LND_Footer;
  return (
    <div data-screen-label="Solutions · Groups" data-sol-root style={{ minHeight:'100%', background:'var(--bg)' }} className="lnd-scroll">
      <SOLNav go={go} active="groups"/>
      <SOLHero
        kicker="For multi-location groups"
        title="Six venues, six P&Ls, "
        emphasis="one screen"
        tail="."
        blurb="Central menu with per-venue overrides. Consolidated analytics. Permissions that reflect your org chart. Audit logs for investors. The ops backbone a group actually needs."
        stat={[
          { v:'6 → 60', l:'Venues supported' },
          { v:'< 4h', l:'Menu rollout' },
          { v:'1 screen', l:'Group rollup' },
        ]}
        go={go}
      />
      <SOLContainer style={{ marginTop:-460, paddingBottom:0, position:'relative', zIndex:1 }}>
        <div style={{ maxWidth:560, marginLeft:'auto', marginRight:0 }}>
          <MockGroupsRollup/>
        </div>
      </SOLContainer>
      <div style={{ height:40 }}/>

      <SOLPains
        eyebrow="Built for operators"
        title="The six things that break at venue number three."
        items={[
          { emoji:'🧩', pain:'Menus out of sync',             fix:'Central menu with per-venue overrides. Push a price change to 6 venues in 30 seconds. Rollback if it breaks.',            feature:'Central menu · per-venue overrides' },
          { emoji:'📊', pain:'Consolidated view is a PDF',    fix:'One screen across the group. Drill from group → region → venue → shift. Live, not month-end.',                             feature:'Group rollup dashboard' },
          { emoji:'🔐', pain:'Shared passwords everywhere',   fix:'Role-based permissions mapped to your org chart. Regional managers see their venues. The group CFO sees everything.',     feature:'Roles + permissions' },
          { emoji:'🕵️', pain:'Audit logs for compliance',    fix:'Every change — menu edit, refund, void, comp — is logged with actor, time, before/after. Exportable to PDF.',              feature:'Audit log · exportable' },
          { emoji:'💶', pain:'Payment reconciliation',        fix:'Consolidated daily payouts. Deposits match settlement. Fee breakdown per venue. No more Excel triangulation.',             feature:'Consolidated settlement' },
          { emoji:'📈', pain:'Benchmarking venues is manual', fix:'Side-by-side: revenue / cover, labour %, food cost, guest rating. Spot the underperformer. See who to copy.',              feature:'Venue benchmarking' },
        ]}
      />

      <SOLFeaturesSplit
        eyebrow="Central menu"
        title="One master, infinite overrides."
        blurb="Build the group menu once. Each venue inherits. Override price, availability, photo, or modifier per venue — without breaking the master. When you launch a new dish, it\'s in every venue on the same day, with the same description, the same allergens, the same cost basis."
        bullets={[
          'Master menu → regional adaptations → per-venue overrides, cleanly separated',
          'Approval flow: regional manager proposes, group manager approves before rollout',
          'Version history on every dish — who changed what, when, why',
          'A/B test a new dish in 2 venues before group-wide launch',
          'Allergen and nutritional info inherited and auditable group-wide',
        ]}
        image={<div style={{ background:'var(--paper-2)', border:'1px solid var(--line)', borderRadius:20, padding:22 }}>
          <div style={{ fontSize:10, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600, marginBottom:14 }}>Pulpo a la gallega · rollout</div>
          {[
            { v:'Bilbao · Casco Viejo', p:'€18.50', s:'Published' },
            { v:'Bilbao · Indautxu',    p:'€18.50', s:'Published' },
            { v:'San Sebastián',        p:'€19.00', s:'Override (+€0.50)' },
            { v:'Madrid · Chamberí',    p:'€19.50', s:'Override (+€1.00)' },
            { v:'Madrid · Malasaña',    p:'€19.50', s:'Override (+€1.00)' },
            { v:'Barcelona · Gràcia',   p:'—',      s:'Unavailable (seasonal)' },
          ].map((r,i) => (
            <div key={i} style={{ display:'grid', gridTemplateColumns:'1fr 70px 130px', gap:12, padding:'11px 0', borderTop: i?'1px solid var(--line)':0, alignItems:'center' }}>
              <div style={{ fontSize:13, fontWeight:500 }}>{r.v}</div>
              <div className="t-tabular" style={{ fontSize:13, textAlign:'right' }}>{r.p}</div>
              <div style={{ fontSize:11, color: r.s.startsWith('Override')?'var(--accent)':r.s.startsWith('Published')?'var(--ok)':'var(--muted)', textAlign:'right', fontWeight:500 }}>{r.s}</div>
            </div>
          ))}
        </div>}
      />

      <SOLFeaturesSplit
        eyebrow="Group analytics"
        title="Know your weakest venue. Know your best."
        blurb="Rank all venues on any metric. Sort by revenue, labour-cost-%, covers, guest rating, feedback sentiment. See where to copy the winner. See where to intervene before the ship sinks."
        bullets={[
          'Peer ranking: every KPI, every venue, every shift',
          'Drill to the weekly view per venue — same schema as a single-venue owner',
          'Alerting: ping a regional manager when a venue\'s labour % hits 35%',
          'Scheduled email rollup: Mondays 08:00, the group CEO sees the numbers',
        ]}
        image={<MockGroupsRollup/>}
      />

      <SOLQuote
        text="We went from six venues on three different POS platforms to Vividish across all of them in six weeks. The group rollup view is what got the board to sign the cheque."
        author="Elena Cortés" role="COO" venue="Grupo Casa Lupe (6 venues)" city="Spain"
      />

      <SOLPriceCta
        go={go} vertical="groups"
        recommend={{ name:'Scale', price:'€99', per:'/ month per venue', blurb:'multi-venue group operations', features:['Unlimited terminals per venue','Central menu with overrides','Consolidated analytics','Role-based permissions + audit log','API access','Custom onboarding + success manager'] }}
      />

      <SOLFaq items={[
        { q:'How does a menu update actually roll out?',            a:'Group manager publishes the change. Each venue inherits within seconds. If a venue had an override on that dish, the override is preserved and flagged for review.' },
        { q:'What about franchised vs. owned venues?',              a:'You can mark venues as franchised. They sit in the group rollup but have their own P&L boundary; the group level only sees what you\'ve permissioned.' },
        { q:'Do you offer white-label for our group?',              a:'Yes, on Scale with a 12-month commitment. Your branding on the guest-facing QR, your domain on the analytics portal, your logo on receipts.' },
        { q:'Can I integrate with our ERP?',                        a:'API is open on Scale. We have reference integrations for SAP, NetSuite, and Holded. Webhook streams for real-time revenue ingestion.' },
        { q:'How are payments consolidated?',                        a:'Each venue settles individually for regulatory reasons, but payout reports roll up to group-level daily. Reconciliation is automated.' },
      ]}/>

      {Footer && <Footer/>}
    </div>
  );
};

window.SolutionCafes = SolutionCafes;
window.SolutionRestaurants = SolutionRestaurants;
window.SolutionBars = SolutionBars;
window.SolutionBakeries = SolutionBakeries;
window.SolutionGroups = SolutionGroups;