// Sections for the Multiuniversal landing page

function Nav({ theme, onToggleTheme }){
  return (
    <header className="nav">
      <div className="nav-inner">
        <a href="#" className="brand" aria-label="Multiuniversal">
          <img className="brand-logo" src="assets/logo-horizontal.png" alt="Multiuniversal"/>
        </a>
        <nav className="nav-links">
          <a href="#how">How it works</a>
          <a href="#use-cases">Use cases</a>
          <a href="#roi">Results</a>
          <a href="#security">Security</a>
        </nav>
        <div className="nav-cta">
          <button className="btn btn-ghost btn-sm" onClick={onToggleTheme} aria-label="Toggle theme">
            {theme === 'dark' ? <Icon.Sun/> : <Icon.Moon/>}
          </button>
          <a href="app/dashboard.html" className="btn btn-ghost btn-sm">Sign in</a>
          <a href="app/dashboard.html" className="btn btn-primary btn-sm">Open app <Icon.Arrow size={14}/></a>
        </div>
      </div>
    </header>
  );
}

function Hero(){
  return (
    <section className="hero" id="hero">
      <div className="hero-grid-bg" aria-hidden></div>
      <div className="hero-glow" aria-hidden></div>

      <div className="hero-inner">
        <span className="eyebrow hero-eyebrow">Your business on autopilot</span>
        <h1>
          Run and grow<br/>
          your business <span className="accent-y">while you sleep.</span>
        </h1>
        <p className="hero-sub">
          Multiuniversal puts the daily running of your business on autopilot —
          following up with leads, booking customers, sending invoices, getting reviews —
          so you spend your time on what only you can do: growing it.
        </p>
        <div className="hero-cta">
          <a href="#cta" className="btn btn-primary btn-on-dark">Try it free for 14 days <Icon.Arrow size={14}/></a>
          <a href="#demo" className="btn btn-ghost btn-on-dark"><Icon.Play size={12}/> See a 2-min walkthrough</a>
        </div>
        <div className="hero-meta">
          <span><span className="dot"></span> No credit card to start</span>
          <span><span className="dot" style={{background:'var(--c-yellow)'}}></span> Set up in under an hour</span>
          <span><span className="dot" style={{background:'var(--c-blue)'}}></span> Cancel anytime</span>
        </div>
      </div>

      {/* Pixel town — your business running on autopilot */}
      <div className="hero-bottom" id="demo">
        <div style={{
          marginTop:'56px',
          marginBottom:'40px',
          background:'rgba(0,0,0,0.25)',
          border:'2px solid rgba(255,255,255,0.15)',
          borderRadius:'14px',
          padding:'6px',
          boxShadow:'0 30px 80px -40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04)',
        }}>
          <WorkflowGraph height={460}/>
        </div>
      </div>
    </section>
  );
}

function Integrations(){
  const cats = [
    { label: 'Customers & Sales', items: [
      {n:'Square', l:'SQ', c:'#1A1A1A'},
      {n:'Shopify', l:'SH', c:'#95BF47'},
      {n:'Stripe', l:'ST', c:'#635BFF'},
      {n:'Mailchimp', l:'MC', c:'#FFE01B', dark:true},
      {n:'Yelp', l:'YP', c:'#D32323'},
      {n:'Google Reviews', l:'GR', c:'#4285F4'},
    ]},
    { label: 'Booking & Messaging', items: [
      {n:'Google Calendar', l:'GC', c:'#4285F4'},
      {n:'Calendly', l:'CL', c:'#006BFF'},
      {n:'WhatsApp', l:'WA', c:'#25D366'},
      {n:'Gmail', l:'GM', c:'#EA4335'},
      {n:'Outlook', l:'OL', c:'#0078D4'},
      {n:'SMS / Twilio', l:'SM', c:'#F22F46'},
    ]},
    { label: 'Money & Operations', items: [
      {n:'QuickBooks', l:'QB', c:'#2CA01C'},
      {n:'Xero', l:'XR', c:'#13B5EA'},
      {n:'Wave', l:'WV', c:'#1D60D7'},
      {n:'PayPal', l:'PP', c:'#003087'},
      {n:'Google Drive', l:'GD', c:'#1FA463'},
      {n:'Excel / Sheets', l:'XL', c:'#0F9D58'},
    ]},
  ];
  return (
    <section style={{paddingTop:'calc(var(--pad-section) * 0.7)',paddingBottom:'calc(var(--pad-section) * 0.7)'}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">Plays nice with your stuff</span>
            <h2 style={{marginTop:14}}>Whatever you already use to run things — it just works.</h2>
          </div>
          <p>You shouldn't have to change how you do business. Multiuniversal connects to the apps you're already using and starts working in the background.</p>
        </div>

        {cats.map((cat, ci) => (
          <div key={ci}>
            <div className="integ-cat">{cat.label}</div>
            <div className="integ-grid">
              {cat.items.map((it,i) => (
                <div key={i} className="integ-tile">
                  <span className="glyph" style={{background:it.c, color: it.dark ? '#1A1A1A' : '#fff'}}>{it.l}</span>
                  <span className="name">{it.n}</span>
                </div>
              ))}
            </div>
          </div>
        ))}

        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:32,padding:'18px 22px',border:'1px dashed var(--line)',borderRadius:12,background:'var(--bg-2)',flexWrap:'wrap',gap:12}}>
          <span style={{fontSize:14,color:'var(--ink-2)'}}>Don't see what you use? Tell us — we add new integrations every week.</span>
          <a href="#" style={{display:'inline-flex',gap:8,alignItems:'center',color:'var(--ink)',fontSize:14,fontWeight:600}}>Request an integration <Icon.Arrow size={14}/></a>
        </div>
      </div>
    </section>
  );
}

function Dashboard(){
  // Customers panel data
  const customers = [
    { name:'Sarah Mendoza',      sub:'Website form · 4 min ago',         val:'$680',   tag:'NEW',     tagC:'new',    av:'#E89A4A', init:'SM' },
    { name:'Garcia Catering',    sub:'Invoice #1042 awaiting send',      val:'$480',   tag:'HOT',     tagC:'hot',    av:'#C04A8D', init:'GC' },
    { name:'Marcus Johnson',     sub:'Booked Tue 2pm · haircut',         val:'$45',    tag:'BOOKED',  tagC:'',       av:'#3F8FCB', init:'MJ' },
    { name:'The Pham Family',    sub:'Repeat · 4 visits this year',      val:'$1,240', tag:'REPEAT',  tagC:'repeat', av:'#3FA34D', init:'PF' },
    { name:'Hooper LLC',         sub:'Invoice 14 days late · reminder sent', val:'$2,100', tag:'CHASE', tagC:'hot', av:'#7A5BC8', init:'HL' },
    { name:'Lena Ramirez',       sub:'No reply 2d · gentle nudge sent',  val:'$320',   tag:'WARM',    tagC:'',       av:'#D9A93A', init:'LR' },
  ];
  // Calendar events (today)
  const events = [
    { h:0,  dur:1,    title:'Sarah M. · consult',     where:'Phone · 9:00–9:45',     bg:'linear-gradient(135deg, #E89A4A, #d97a1f)' },
    { h:1.4,dur:1.2,  title:'Marcus J. · haircut',    where:'In studio · 10:30',     bg:'linear-gradient(135deg, #3F8FCB, #275d8e)' },
    { h:3,  dur:0.9,  title:'Block · admin time',    where:'Heads-down · 12:00',     bg:'linear-gradient(135deg, #75736C, #3B3A36)' },
    { h:4.2,dur:1,    title:'Pham family · home',     where:'On-site · 1:30 pm',     bg:'linear-gradient(135deg, #3FA34D, #226c2c)' },
    { h:5.6,dur:1.4,  title:'Garcia · tasting',       where:'Showroom · 2:30 pm',    bg:'linear-gradient(135deg, #C04A8D, #7c2d5b)' },
  ];
  return (
    <section id="dashboard" className="dash-section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">Your customer area</span>
            <h2 style={{marginTop:14}}>One screen for the whole business — everything else runs in the background.</h2>
          </div>
          <p>Today's customers, today's money, today's calendar. The autopilot handles the rest, and surfaces only what needs your eyes.</p>
        </div>

        <div className="dash-shell">
          {/* Browser-ish chrome */}
          <div className="dash-titlebar">
            <span className="traffic"><span></span><span></span><span></span></span>
            <div className="url"><span className="lock">🔒</span><span>app.multiuniversal.com</span><span style={{marginLeft:'auto',color:'var(--ink-3)'}}>/today</span></div>
            <span className="pill">● LIVE</span>
          </div>

          <aside className="dash-side">
            <div className="ws">
              <div className="av">M</div>
              <div className="who"><b>Mia's Studio</b><span>workspace</span></div>
              <span className="chev">▾</span>
            </div>

            <div className="sec-lbl">My business</div>
            <div className="item" data-active="true"><span className="ic"><Icon.Bolt size={14}/></span> Today <span className="badge">⌘1</span></div>
            <div className="item"><span className="ic"><Icon.Plug size={14}/></span> Customers <span className="badge">218</span></div>
            <div className="item"><span className="ic"><Icon.Brain size={14}/></span> Bookings <span className="badge">14</span></div>
            <div className="item"><span className="ic"><Icon.Globe size={14}/></span> Reviews <span className="badge">3 new</span><span className="dot-r"/></div>
            <div className="item"><span className="ic"><Icon.Eye size={14}/></span> Inbox <span className="badge">12</span></div>

            <div className="sec-lbl">Money</div>
            <div className="item"><span className="ic"><Icon.Spark size={14}/></span> Invoices <span className="badge">$3,840</span></div>
            <div className="item"><span className="ic"><Icon.Lock size={14}/></span> Needs approval <span className="badge" style={{color:'var(--c-coral)'}}>3</span><span className="dot-r"/></div>
            <div className="item"><span className="ic"><Icon.Brain size={14}/></span> Cash flow</div>

            <div className="sec-lbl">Setup</div>
            <div className="item"><span className="ic"><Icon.Shield size={14}/></span> Automations <span className="badge">9 on</span></div>
            <div className="item"><span className="ic"><Icon.Plug size={14}/></span> Connections</div>

            <div className="pro-card">
              <b>Mia's first 30 days</b>
              17.4 hours saved · 22% more bookings · 4.9★ avg.
              <span className="pgo">See the breakdown →</span>
            </div>
          </aside>

          <div className="dash-main">
            <div className="dash-top">
              <div className="dash-crumbs">my business / <b>today</b><span style={{marginLeft:10,padding:'2px 7px',background:'var(--bg-2)',borderRadius:99,fontSize:10.5,color:'var(--ink-3)'}}>Wed · Apr 29</span></div>
              <div className="dash-search">
                <span style={{opacity:.6}}>⌕</span>
                <span>Search customers, invoices, bookings…</span>
                <span style={{marginLeft:'auto',padding:'2px 6px',border:'1px solid var(--line)',borderRadius:4,fontSize:10}}>⌘K</span>
              </div>
              <a href="#" className="btn btn-primary btn-sm">+ New automation</a>
            </div>

            <div className="dash-kpis">
              <div className="dash-kpi">
                <div className="lbl">Hours saved this week</div>
                <div className="val">17.4<span style={{fontSize:14,color:'var(--ink-3)',marginLeft:4,fontWeight:500}}>h</span></div>
                <div className="delta up">▲ 2.1h vs last week</div>
              </div>
              <div className="dash-kpi">
                <div className="lbl">New leads · replied</div>
                <div className="val">42<span style={{fontSize:14,color:'var(--ink-3)',marginLeft:6,fontWeight:500}}>/ 42</span></div>
                <div className="delta up">▲ avg reply 4 min</div>
              </div>
              <div className="dash-kpi">
                <div className="lbl">Outstanding invoices</div>
                <div className="val">$3,840</div>
                <div className="delta dn">▼ $1,210 this week</div>
              </div>
              <div className="dash-kpi">
                <div className="lbl">Reviews · this week</div>
                <div className="val">12<span style={{fontSize:14,color:'var(--ink-3)',marginLeft:4,fontWeight:500}}> · 4.9★</span></div>
                <div className="delta up">▲ 5 new</div>
              </div>
            </div>

            <div className="dash-row">
              <div className="dash-card">
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:10}}>
                  <div>
                    <h4>Hours saved — last 7 days</h4>
                    <div className="sub">Across all your automations</div>
                  </div>
                  <div style={{display:'flex',gap:10,fontSize:11,color:'var(--ink-3)',fontFamily:'var(--font-mono)'}}>
                    <span style={{display:'inline-flex',alignItems:'center',gap:6}}><span style={{width:8,height:8,background:'var(--c-coral)',borderRadius:2}}></span>HOURS SAVED</span>
                  </div>
                </div>
                <Spark/>
                <div className="dash-runs" style={{marginTop:18}}>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:6}}>
                    <h4 style={{margin:0}}>What got done today</h4>
                    <span className="sub">live · 14 events</span>
                  </div>
                  {[
                    {ic:'var(--c-yellow)', n:'Replied to new lead',           who:'Sarah M. · website form',         dur:'just now', s:'SENT', c:'ok'},
                    {ic:'var(--c-blue)',   n:'Confirmed booking',             who:'Tue 2pm · haircut',                dur:'2m ago',   s:'SENT', c:'ok'},
                    {ic:'var(--c-magenta)',n:'Drafted invoice #1042',         who:'Garcia Catering · $480',           dur:'12m ago',  s:'REVIEW', c:'run'},
                    {ic:'var(--c-coral)',  n:'Sent payment reminder',         who:'Hooper LLC · 14 days late',        dur:'1h ago',   s:'SENT', c:'ok'},
                    {ic:'var(--c-green)',  n:'Asked for review',              who:'James K. · post-service',          dur:'3h ago',   s:'SENT', c:'ok'},
                    {ic:'var(--c-coral)',  n:'Flagged unusual charge',        who:'Stripe · $1,240 chargeback',       dur:'5h ago',   s:'YOU',  c:'warn'},
                  ].map((r,i) => (
                    <div className="dash-run" key={i}>
                      <span style={{width:8,height:8,borderRadius:'50%',background:r.ic}}></span>
                      <span className="name">{r.n}</span>
                      <span className="who">{r.who}</span>
                      <span className="dur">{r.dur}</span>
                      <span className={`stat ${r.c}`}>{r.s}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="dash-card">
                <div>
                  <h4>Needs your approval</h4>
                  <div className="sub">Garcia Catering · invoice #1042</div>
                </div>
                <div className="agent-stream">
                  <div className="agent-msg">
                    <div className="who">▸ FROM YOUR INBOX</div>
                    Maria from Garcia Catering: "Can you send the invoice for last Saturday's event? 80 guests, plus the bar package."
                  </div>
                  <div className="agent-msg">
                    <div className="who">▸ MATCHED TO YOUR NOTES</div>
                    Saturday 04/26 · Garcia 50th anniversary · 80 guests · plated dinner + premium bar · deposit $200 paid 04/12.
                  </div>
                  <div className="agent-msg ai">
                    <div className="who">◆ DRAFTED FOR YOU</div>
                    Invoice #1042 for $480 — line items pulled from your price list, deposit credited. Drafted a friendly email thanking Maria and attaching the invoice. Ready to send?
                  </div>
                  <div style={{display:'flex',gap:8,marginTop:6}}>
                    <button className="btn btn-primary btn-sm" style={{height:32,fontSize:12}}>Send invoice</button>
                    <button className="btn btn-ghost btn-sm" style={{height:32,fontSize:12}}>Edit first</button>
                    <button className="btn btn-ghost btn-sm" style={{height:32,fontSize:12,marginLeft:'auto'}}>Skip</button>
                  </div>
                </div>

                <div style={{marginTop:14,paddingTop:14,borderTop:'1px solid var(--line-2)'}}>
                  <h4>Quick actions</h4>
                  <div className="sub">Things you might want to kick off</div>
                  <div className="quick-grid">
                    <div className="quick-tile"><span className="icb" style={{background:'color-mix(in oklab, var(--c-yellow) 24%, transparent)',color:'#a07906'}}><Icon.Bolt size={13}/></span>Ask for reviews · 3 customers</div>
                    <div className="quick-tile"><span className="icb" style={{background:'color-mix(in oklab, var(--c-blue) 22%, transparent)',color:'var(--c-blue)'}}><Icon.Spark size={13}/></span>Re-engage 14 quiet leads</div>
                    <div className="quick-tile"><span className="icb" style={{background:'color-mix(in oklab, var(--c-green) 22%, transparent)',color:'var(--c-green)'}}><Icon.Brain size={13}/></span>Send weekly summary</div>
                    <div className="quick-tile"><span className="icb" style={{background:'color-mix(in oklab, var(--c-coral) 22%, transparent)',color:'var(--c-coral)'}}><Icon.Plug size={13}/></span>Connect QuickBooks</div>
                  </div>
                </div>
              </div>
            </div>

            <div className="dash-twocol">
              <div className="dash-card">
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
                  <div>
                    <h4>Customers · today</h4>
                    <div className="sub">Sorted by what's most pressing</div>
                  </div>
                  <a href="#" style={{fontSize:12,color:'var(--ink-3)',fontFamily:'var(--font-mono)'}}>view all 218 →</a>
                </div>
                <div className="cust-list">
                  {customers.map((c, i) => (
                    <div className="cust-row" key={i}>
                      <span className="av" style={{background:c.av}}>{c.init}</span>
                      <span className="nm">{c.name}<small>{c.sub}</small></span>
                      <span className="vl">{c.val}</span>
                      <span className={`tag ${c.tagC}`}>{c.tag}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div className="dash-card">
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
                  <div>
                    <h4>Today's calendar</h4>
                    <div className="sub">5 appointments · auto-confirmed</div>
                  </div>
                  <span className="sub" style={{color:'var(--c-coral)'}}>● now 11:42 am</span>
                </div>
                <div className="cal-grid">
                  <div className="cal-time">
                    <span>9 am</span><span>10</span><span>11</span><span>12 pm</span><span>1</span><span>2</span><span>3</span>
                  </div>
                  <div className="cal-col" style={{minHeight: 7*34 + 'px'}}>
                    {events.map((e, i) => (
                      <div key={i} className="cal-evt"
                           style={{top: (e.h * 34 + 4) + 'px', height: (e.dur * 34 - 4) + 'px', background: e.bg}}>
                        {e.title}
                        <small>{e.where}</small>
                      </div>
                    ))}
                    <div className="cal-now" style={{top: (2.7 * 34) + 'px'}}/>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Spark(){
  // Simple area-chart sparkline — 7 days of synthetic but plausible data
  const data = [820,940,1180,1020,1340,1520,2031];
  const w = 600, h = 88, max = 2200;
  const step = w / (data.length - 1);
  const pts = data.map((v,i) => `${(i*step).toFixed(1)},${(h - (v/max)*h*0.9 - 4).toFixed(1)}`);
  const path = `M ${pts.join(' L ')}`;
  const area = `${path} L ${w},${h} L 0,${h} Z`;
  return (
    <svg className="spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id="sparkFill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor="var(--c-coral)" stopOpacity="0.35"/>
          <stop offset="1" stopColor="var(--c-coral)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      {[0,1,2,3].map(i => (
        <line key={i} x1="0" x2={w} y1={(h/4)*i+2} y2={(h/4)*i+2} stroke="var(--line-2)" strokeWidth="1"/>
      ))}
      <path d={area} fill="url(#sparkFill)"/>
      <path d={path} fill="none" stroke="var(--c-coral)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      {data.map((v,i) => (
        <circle key={i} cx={i*step} cy={h - (v/max)*h*0.9 - 4} r="2.5" fill="var(--c-coral)"/>
      ))}
      {['Mon','Tue','Wed','Thu','Fri','Sat','Sun'].map((d,i) => (
        <text key={d} x={i*step} y={h-1} fontFamily="JetBrains Mono" fontSize="9" fill="var(--ink-3)" textAnchor={i===0?'start':i===6?'end':'middle'}>{d}</text>
      ))}
    </svg>
  );
}

function HowItWorks(){
  return (
    <section id="how">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">How it works</span>
            <h2 style={{marginTop:14}}>Set it up once. Let your business run itself.</h2>
          </div>
          <p>No coding, no consultants, no week-long onboarding. You'll have your first piece of the business running on autopilot before lunch.</p>
        </div>

        <div className="steps">
          <article className="step">
            <div className="step-num">Tell us</div>
            <h3>What do you wish ran itself?</h3>
            <p>Following up with leads. Booking appointments. Chasing late invoices. Asking for reviews. Pick the parts of running the business that are eating your nights and weekends.</p>
            <div className="step-art" aria-hidden>
              <svg viewBox="0 0 320 120" width="100%" height="100%">
                {[
                  {x:30,c:'var(--c-yellow)'},{x:90,c:'var(--c-coral)'},{x:150,c:'var(--c-magenta)'},
                  {x:210,c:'var(--c-green)'},{x:270,c:'var(--c-blue)'}
                ].map((d,i)=>(
                  <g key={i}>
                    <rect x={d.x-18} y={36} width="36" height="36" rx="9" fill="var(--card)" stroke="var(--line)"/>
                    <circle cx={d.x} cy={54} r="6" fill={d.c}/>
                    <line x1={d.x} y1={72} x2={d.x} y2={96} stroke="var(--line)" strokeDasharray="3 3"/>
                  </g>
                ))}
                <line x1="30" y1="96" x2="270" y2="96" stroke="var(--line)"/>
              </svg>
            </div>
          </article>

          <article className="step">
            <div className="step-num">We learn</div>
            <h3>The AI watches how you run things.</h3>
            <p>For a few days it observes how you talk to customers, how you price, how you schedule. Then it proposes the autopilot — written out in plain English — for you to sign off on.</p>
            <div className="step-art" aria-hidden>
              <svg viewBox="0 0 320 120" width="100%" height="100%">
                <rect x="20" y="20" width="280" height="80" rx="10" fill="var(--card)" stroke="var(--line)"/>
                {[
                  {y:36,w:240,c:'var(--c-coral)',op:0.9},
                  {y:52,w:180,c:'var(--c-yellow)',op:0.9},
                  {y:68,w:210,c:'var(--c-green)',op:0.9},
                  {y:84,w:120,c:'var(--c-blue)',op:0.9},
                ].map((b,i)=>(<g key={i}>
                  <rect x={36} y={b.y} width={6} height={6} rx="2" fill={b.c}/>
                  <rect x={50} y={b.y} width={b.w} height={6} rx="3" fill="var(--bg-2)"/>
                  <rect x={50} y={b.y} width={b.w*0.6} height={6} rx="3" fill={b.c} opacity={b.op}/>
                </g>))}
              </svg>
            </div>
          </article>

          <article className="step">
            <div className="step-num">It runs</div>
            <h3>You get your time back.</h3>
            <p>Your business keeps moving even when you don't. You'll see what got handled, what made you money, and the few things that still need your eyes — every morning, in one screen.</p>
            <div className="step-art" aria-hidden>
              <svg viewBox="0 0 320 120" width="100%" height="100%">
                <rect x="20" y="20" width="280" height="80" rx="10" fill="var(--card)" stroke="var(--line)"/>
                <path d="M40 80 L80 64 L120 70 L160 50 L200 56 L240 36 L280 44"
                      fill="none" stroke="var(--c-green)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M40 80 L80 64 L120 70 L160 50 L200 56 L240 36 L280 44 L280 92 L40 92 Z"
                      fill="var(--c-green)" opacity="0.10"/>
                {[40,80,120,160,200,240,280].map((x,i)=>{
                  const ys=[80,64,70,50,56,36,44];
                  return <circle key={i} cx={x} cy={ys[i]} r="2.5" fill="var(--c-green)"/>
                })}
              </svg>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

const useCases = {
  ops: {
    role: 'Win more customers',
    label: 'Win more customers',
    title: 'Every lead replied to in minutes — even at midnight.',
    body: "Most small businesses lose customers not because they're bad at the work, but because they're too busy doing it to reply fast. Multiuniversal answers, qualifies, and books the meeting before your competitor opens their inbox.",
    bullets: ['Replies to website forms, Instagram DMs, and missed calls in your voice.','Books straight into your calendar with the right service and the right price.','Follows up politely until they answer — or quietly closes the loop.'],
    metric: { v:'4 min', l:'average reply time, day or night' },
  },
  support: {
    role: 'Take care of customers',
    label: 'Keep customers happy',
    title: 'Customers feel taken care of. You don\'t feel buried.',
    body: 'Multiuniversal handles the small stuff — appointment confirmations, after-service check-ins, "what time are you open" — and gently escalates the things only you can answer.',
    bullets: ['Confirmations, reminders, and follow-ups go out without you lifting a finger.','Reviews get asked for at exactly the right moment, in your voice.','Anything sensitive — refunds, complaints, VIPs — comes straight to you.'],
    metric: { v:'4.9★', l:'avg. review rating across customers' },
  },
  finance: {
    role: 'Get paid faster',
    label: 'Get paid faster',
    title: 'Stop being your own collections department.',
    body: 'Invoices are drafted from your jobs and your prices, sent on time, and politely chased until they\'re paid. You see only the ones that need a real conversation.',
    bullets: ['Invoices drafted the moment a job is done — accurate, on-brand, ready to send.','Reminders go out on a cadence that gets results without making you the bad guy.','You see what you\'ve made this week, what\'s outstanding, and what to do about it.'],
    metric: { v:'12 days', l:'faster, on average, to get paid' },
  },
  it: {
    role: 'Grow steadily',
    label: 'Grow steadily',
    title: 'Spot the parts of the business that are working — and double down.',
    body: 'You don\'t need a dashboard with 40 widgets. You need to know which services make you money, which customers come back, and where to spend the next hour you have.',
    bullets: ['One simple weekly read: what worked, what didn\'t, what to do next.','Repeat customers spotted automatically — they get the love they deserve.','Slow weeks get a nudge before they hurt: a review push, a re-engagement, a special.'],
    metric: { v:'+22%', l:'avg. revenue growth in year one' },
  },
};

function UseCases(){
  const [tab, setTab] = React.useState('ops');
  const uc = useCases[tab];
  return (
    <section id="use-cases" style={{background:'var(--bg-2)'}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">Use cases</span>
            <h2 style={{marginTop:14}}>Built for the teams that keep the business running.</h2>
          </div>
          <p>Pick a function. We've shipped automations for dozens of variations of each — your version takes days to stand up, not a quarter.</p>
        </div>

        <div className="uc-tabs" role="tablist">
          {Object.entries(useCases).map(([k,v]) => (
            <button key={k} className="uc-tab" data-active={tab===k} onClick={() => setTab(k)} role="tab" aria-selected={tab===k}>
              {v.label}
            </button>
          ))}
        </div>

        <div className="uc-grid">
          <div className="uc-copy">
            <div className="uc-role">{uc.role}</div>
            <h3>{uc.title}</h3>
            <p>{uc.body}</p>
            <ul className="uc-list">
              {uc.bullets.map((b,i) => <li key={i}>{b}</li>)}
            </ul>
            <div style={{marginTop:32,display:'flex',alignItems:'baseline',gap:14,paddingTop:24,borderTop:'1px solid var(--line)'}}>
              <span style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:'40px',letterSpacing:'-0.03em',color:'var(--c-coral)'}}>{uc.metric.v}</span>
              <span style={{color:'var(--ink-3)',fontSize:14}}>{uc.metric.l}</span>
            </div>
          </div>

          <div className="uc-canvas" aria-hidden>
            <UseCaseVis kind={tab}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function UseCaseVis({ kind }){
  // Distinct illustration per tab — lightweight, on-brand
  const c = {
    ops: 'var(--c-coral)',
    support: 'var(--c-blue)',
    finance: 'var(--c-green)',
    it: 'var(--c-magenta)',
  }[kind];

  if (kind === 'ops') {
    return (
      <div style={{height:'100%',display:'flex',flexDirection:'column',gap:10,padding:'8px 6px'}}>
        <div style={{display:'flex',justifyContent:'space-between',fontFamily:'var(--font-mono)',fontSize:11,color:'var(--ink-3)',letterSpacing:'.08em',padding:'4px 6px'}}>
          <span>NEW LEADS · TODAY</span><span>autopilot ON</span>
        </div>
        {[
          {n:'Sarah M.', s:'Replied · booked Tue 2pm', score:'4 min', owner:'website form', tag:c},
          {n:'Marcus J.', s:'Replied · awaiting answer', score:'2 min', owner:'Instagram DM', tag:'var(--c-yellow)'},
          {n:'The Pham family', s:'Replied · booked Sat 10am', score:'6 min', owner:'missed call', tag:c},
          {n:'Lena R.', s:'Following up (2nd nudge)', score:'1d ago', owner:'website form', tag:'var(--ink-3)'},
          {n:'James K.', s:'Replied · price sent', score:'12 min', owner:'WhatsApp', tag:c},
          {n:'Diana T.', s:'Replied · booked Wed 4pm', score:'8 min', owner:'Yelp', tag:c},
        ].map((r,i) => (
          <div key={i} style={{
            display:'grid',gridTemplateColumns:'1fr 1.2fr auto',gap:14,alignItems:'center',
            padding:'12px 14px',border:'1px solid var(--line)',borderRadius:10,background:'var(--bg)',
          }}>
            <span style={{display:'flex',alignItems:'center',gap:10}}>
              <span style={{width:8,height:8,borderRadius:'50%',background:r.tag}}></span>
              <b style={{fontFamily:'var(--font-display)',fontWeight:600,fontSize:14}}>{r.n}</b>
            </span>
            <span style={{fontSize:12.5,color:'var(--ink-2)'}}>{r.s}</span>
            <span style={{fontFamily:'var(--font-mono)',fontSize:11,color:'var(--ink-3)'}}>{r.score}</span>
          </div>
        ))}
      </div>
    );
  }
  if (kind === 'support') {
    return (
      <div style={{height:'100%',display:'flex',flexDirection:'column',gap:10}}>
        {[
          {who:'Customer · 09:42', txt:'Hi! Just wanted to confirm — is my appointment still Saturday at 2? Sorry for asking, my calendar got wiped 😅', side:'in'},
          {who:'Multiuniversal · drafted', txt:'Hi Jamie! Yes — you\'re on the books for Sat 4/30 at 2:00pm with Alex. Reply YES and I\'ll send a calendar invite. (sent automatically · in your voice)', side:'ai'},
          {who:'Customer · 09:43', txt:'Perfect, yes please ✓', side:'in'},
          {who:'Autopilot · 09:43', txt:'✓ Calendar invite sent · Reminder scheduled for Friday', side:'sent'},
        ].map((m,i) => (
          <div key={i} style={{
            padding:'14px 16px',borderRadius:12,fontSize:13,lineHeight:1.5,
            background: m.side==='ai' ? 'color-mix(in oklab, var(--c-blue) 12%, var(--bg))' :
                        m.side==='sent' ? 'color-mix(in oklab, var(--c-green) 12%, var(--bg))' :
                        'var(--bg)',
            border:'1px solid '+(m.side==='ai'?'color-mix(in oklab, var(--c-blue) 40%, transparent)':'var(--line)'),
            alignSelf:m.side==='in'?'flex-start':'stretch',
            maxWidth:m.side==='in'?'78%':'100%',
          }}>
            <div style={{fontFamily:'var(--font-mono)',fontSize:10.5,color:'var(--ink-3)',letterSpacing:'.08em',marginBottom:6,textTransform:'uppercase'}}>{m.who}</div>
            <div style={{color:'var(--ink-2)'}}>{m.txt}</div>
          </div>
        ))}
        <div style={{marginTop:'auto',paddingTop:14,borderTop:'1px dashed var(--line)',display:'flex',justifyContent:'space-between',fontSize:12,color:'var(--ink-3)',fontFamily:'var(--font-mono)',letterSpacing:'.06em'}}>
          <span>HANDLED WHILE YOU WERE WITH A CUSTOMER</span><span>0 INTERRUPTIONS</span>
        </div>
      </div>
    );
  }
  if (kind === 'finance') {
    return (
      <div style={{height:'100%',display:'flex',flexDirection:'column',gap:14,padding:'4px'}}>
        <div style={{display:'flex',justifyContent:'space-between',fontFamily:'var(--font-mono)',fontSize:11,color:'var(--ink-3)',letterSpacing:'.08em'}}>
          <span>CASH · THIS MONTH</span><span>autopilot ON</span>
        </div>
        <div style={{height:8,background:'var(--bg-2)',borderRadius:4,overflow:'hidden'}}>
          <div style={{width:'78%',height:'100%',background:'linear-gradient(90deg, var(--c-yellow), var(--c-green))'}}></div>
        </div>
        {[
          {l:'Paid this month', v:'$18,420', c:'var(--c-green)'},
          {l:'Outstanding (you don\'t need to chase)', v:'$3,840', c:'var(--c-yellow)'},
          {l:'Reminders sent on your behalf', v:'14', c:'var(--c-blue)'},
          {l:'Avg. days to get paid', v:'9 days', c:'var(--c-coral)'},
        ].map((r,i) => (
          <div key={i} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'14px 16px',border:'1px solid var(--line)',borderRadius:10,background:'var(--bg)'}}>
            <span style={{fontSize:14,color:'var(--ink-2)'}}>{r.l}</span>
            <span style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:18,color:r.c,letterSpacing:'-0.02em'}}>{r.v}</span>
          </div>
        ))}
      </div>
    );
  }
  // it → "grow steadily" weekly read
  return (
    <div style={{height:'100%',display:'flex',flexDirection:'column',gap:12,padding:'4px'}}>
      <div style={{display:'flex',justifyContent:'space-between',fontFamily:'var(--font-mono)',fontSize:11,color:'var(--ink-3)',letterSpacing:'.08em'}}>
        <span>YOUR WEEK · 5 MIN READ</span><span>SENT MON 7AM</span>
      </div>
      {[
        {t:'Best week in 3 months', d:'Revenue up 18% — driven by Saturday bookings', c:'var(--c-green)', done:true},
        {t:'12 new five-star reviews', d:'Auto-asked 2 days after each service', c:'var(--c-green)', done:true},
        {t:'7 repeat customers came back', d:'They got a "thanks for coming back" note', c:'var(--c-green)', done:true},
        {t:'Tuesdays are slow', d:'Suggestion: send a Tue-only offer to your top 50', c:'var(--c-magenta)', done:false},
        {t:'2 customers haven\'t booked in 60+ days', d:'Want me to send a friendly check-in?', c:'var(--c-magenta)', done:false},
      ].map((r,i) => (
        <div key={i} style={{display:'flex',gap:14,padding:'14px',border:'1px solid var(--line)',borderRadius:10,background:'var(--bg)',alignItems:'flex-start'}}>
          <span style={{
            width:22,height:22,borderRadius:'50%',flex:'0 0 auto',marginTop:1,
            display:'grid',placeItems:'center',
            background:r.done?r.c:'transparent',
            border:r.done?'none':`1.5px dashed ${r.c}`,
            color:'#fff',fontSize:12,
          }}>{r.done?'✓':''}</span>
          <div>
            <b style={{fontFamily:'var(--font-display)',fontWeight:600,fontSize:14}}>{r.t}</b>
            <div style={{fontSize:12.5,color:'var(--ink-3)',marginTop:2}}>{r.d}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function ROI(){
  const stats = [
    { v:'17', unit:'h/wk',  label:'Hours back in your week', sub:'avg. across small business owners' },
    { v:'+22', unit:'%',    label:'Revenue growth in year one', sub:'from faster replies & repeat customers' },
    { v:'4', unit:'min',    label:'Avg. reply time to new leads', sub:'including nights and weekends' },
    { v:'4.9', unit:'★',    label:'Customer review average', sub:'from auto-asked reviews at the right moment' },
  ];
  return (
    <section id="roi" className="roi">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">What changes for you</span>
            <h2 style={{marginTop:14}}>Your business runs better. You work less.</h2>
          </div>
          <p>What small business owners tell us after the first 90 days. Your numbers will look like yours — these are the patterns we see most.</p>
        </div>
        <div className="roi-grid">
          {stats.map((s,i) => (
            <div key={i} className="roi-card">
              <div className="roi-num">{s.v}<span className="unit">{s.unit}</span></div>
              <div className="roi-label">{s.label}</div>
              <div className="roi-sub">{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Security(){
  return (
    <section id="security" className="sec">
      <div className="wrap">
        <div className="sec-grid">
          <div>
            <span className="eyebrow">Your data, your business</span>
            <h2 style={{marginTop:14,maxWidth:'18ch'}}>You stay in charge. Always.</h2>
            <p style={{marginTop:18,maxWidth:'52ch',fontSize:16}}>
              Multiuniversal acts on your behalf — never around you. Your customers, your data,
              your decisions. We're just the autopilot you can switch off any time.
            </p>
            <div className="sec-list">
              <div className="sec-row">
                <span className="dot"></span>
                <div><b>You approve anything that matters</b><p>Set the line — anything over a price, anything from a new customer, anything that doesn't sound right. We send it to you and wait.</p></div>
              </div>
              <div className="sec-row">
                <span className="dot"></span>
                <div><b>Your customer data stays yours</b><p>Never sold, never used to train other models. Encrypted in transit and at rest. Delete it whenever you want — one click, gone.</p></div>
              </div>
              <div className="sec-row">
                <span className="dot"></span>
                <div><b>Switch off, take over, undo</b><p>Pause the autopilot for an hour, a day, or forever. See exactly what was sent in your name. Roll back any message with one click.</p></div>
              </div>
            </div>
          </div>

          <div>
            <div className="sec-badges">
              <div className="sec-badge"><span className="ic"><Icon.Shield/></span><div><b>SOC 2 Type II</b><span>Independently audited</span></div></div>
              <div className="sec-badge"><span className="ic"><Icon.Globe/></span><div><b>GDPR · CCPA</b><span>Your data, your rights</span></div></div>
              <div className="sec-badge"><span className="ic"><Icon.Lock/></span><div><b>Bank-grade encryption</b><span>In transit & at rest</span></div></div>
              <div className="sec-badge"><span className="ic"><Icon.Eye/></span><div><b>Full transparency</b><span>Every action, logged</span></div></div>
            </div>
            <div style={{marginTop:14,padding:'20px 22px',border:'1px solid var(--line)',borderRadius:'var(--radius-sm)',background:'var(--bg)'}}>
              <div style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'.1em',color:'var(--ink-3)',textTransform:'uppercase',marginBottom:10}}>Common questions</div>
              <ul style={{listStyle:'none',padding:0,margin:0,display:'flex',flexDirection:'column',gap:10,fontSize:14}}>
                <li style={{display:'flex',justifyContent:'space-between',color:'var(--ink-2)'}}><a href="#">Will it sound like me to my customers?</a><Icon.Arrow size={14}/></li>
                <li style={{display:'flex',justifyContent:'space-between',color:'var(--ink-2)'}}><a href="#">Can I undo something it sent?</a><Icon.Arrow size={14}/></li>
                <li style={{display:'flex',justifyContent:'space-between',color:'var(--ink-2)'}}><a href="#">What if I want to take over?</a><Icon.Arrow size={14}/></li>
                <li style={{display:'flex',justifyContent:'space-between',color:'var(--ink-2)'}}><a href="#">How is my customer data protected?</a><Icon.Arrow size={14}/></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTABanner(){
  return (
    <section id="cta">
      <div className="wrap">
        <div className="cta-banner">
          <div>
            <span style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'.18em',textTransform:'uppercase',color:'var(--c-yellow)'}}>14 days, no card</span>
            <h2 style={{marginTop:12}}>Get your business running on autopilot this week.</h2>
            <p>Pick one thing you wish ran itself — replies, bookings, invoices, reviews. We'll have it working before your next coffee.</p>
          </div>
          <div className="cta-banner-actions">
            <a href="#" className="btn btn-primary">Start free <Icon.Arrow size={14}/></a>
            <a href="#" className="btn btn-ghost">See it in action</a>
          </div>
          <div className="stripe"></div>
        </div>
      </div>
    </section>
  );
}

function Footer(){
  return (
    <footer>
      <div className="foot">
        <div className="foot-brand">
          <a href="#" className="brand" aria-label="Multiuniversal">
            <img className="brand-logo-foot" src="assets/logo-horizontal.png" alt="Multiuniversal"/>
          </a>
          <p style={{fontSize:14}}>Your business on autopilot — so you can spend your time on what only you can do.</p>
        </div>
        <div>
          <h5>Product</h5>
          <ul>
            <li><a href="#">How it works</a></li>
            <li><a href="#">What it can do</a></li>
            <li><a href="#">Integrations</a></li>
            <li><a href="#">Pricing</a></li>
          </ul>
        </div>
        <div>
          <h5>For owners</h5>
          <ul>
            <li><a href="#">Customer stories</a></li>
            <li><a href="#">Setup guides</a></li>
            <li><a href="#">Help center</a></li>
            <li><a href="#">Contact us</a></li>
          </ul>
        </div>
        <div>
          <h5>Company</h5>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Press</a></li>
            <li><a href="#">Blog</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 Multiuniversal. All rights reserved.</span>
        <span style={{display:'flex',gap:18}}>
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Cookies</a>
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Integrations, Dashboard, HowItWorks, UseCases, ROI, Security, CTABanner, Footer });
