const { useState, useEffect } = React;

  const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
    "theme": "paper",
    "headlineStyle": "serif",
    "showLineageBanner": true
  }/*EDITMODE-END*/;

  /* ---------- ICONS ---------- */
  const Caret = ({size=14}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M9 6l6 6-6 6"/></svg>);
  const Check = ({size=14}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 12l5 5L20 6"/></svg>);
  const ExtLink = ({size=11}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M14 4h6v6M20 4l-9 9M19 13v6H5V5h6"/></svg>);
  const Dot = ({c}) => <span style={{display:'inline-block',width:6,height:6,borderRadius:99,background:c}}/>;

  // Azure cube logo (canonical-ish)
  const AzureMark = ({size=20}) => (
    <svg width={size} height={size} viewBox="0 0 96 96" aria-hidden="true">
      <defs>
        <linearGradient id="azg" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#0078d4"/>
          <stop offset="100%" stopColor="#005a9e"/>
        </linearGradient>
      </defs>
      <path d="M40 12L8 78h22l4-9 22 5-12-26-4-36z" fill="url(#azg)"/>
      <path d="M52 18l-6 22 14 14-22 6-2 8h52L52 18z" fill="#50e6ff" opacity="0.9"/>
    </svg>
  );

  /* ---------- LINEAGE BANNER (top-most) ---------- */
  function LineageBanner() {
    return (
      <div className="lineage-banner" style={{background:'var(--ink)', color:'var(--paper)', fontSize:12, padding:'8px 24px', textAlign:'center', fontFamily:'var(--mono)', letterSpacing:'0.02em'}}>
        <span style={{opacity:0.7}}>This is a fork of </span>
        <a href="https://mikeoss.com" target="_blank" rel="noopener" style={{borderBottom:'1px dotted currentColor'}}>Mike OSS by Will Chen</a>
        <span style={{opacity:0.7}}> · We do not own Mike. We modify and package it for Azure. </span>
        <a href="https://github.com/Altien/mikeOssAzure" target="_blank" rel="noopener" style={{borderBottom:'1px dotted currentColor'}}>Source on GitHub <ExtLink/></a>
        <span style={{opacity:0.7}}> · AGPL-3.0</span>
      </div>
    );
  }

  /* ---------- NAV ---------- */
  function Nav({page, setPage, onMarketplaceClick, onBookCallClick}) {
    const navLink = (id, label) => (
      <a onClick={()=>setPage(id)} style={{cursor:'pointer', color: page===id ? 'var(--ink)' : 'var(--ink-2)', fontWeight: page===id ? 500 : 400, borderBottom: page===id ? '1px solid var(--ink)' : '1px solid transparent', paddingBottom:1}}>{label}</a>
    );
    return (
      <header style={{position:'sticky', top:0, zIndex:30, background:'color-mix(in srgb, var(--paper) 90%, transparent)', backdropFilter:'blur(10px)', borderBottom:'1px solid var(--line)'}}>
        <div style={{maxWidth:1280, margin:'0 auto', padding:'14px 32px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div style={{display:'flex', alignItems:'center', gap:42}}>
            <a onClick={()=>setPage('home')} style={{display:'flex', alignItems:'center', gap:10, fontFamily:'var(--serif)', fontSize:22, fontWeight:400, letterSpacing:'-0.01em', cursor:'pointer'}}>
              <AzureMark size={22}/>
              <span><span style={{fontStyle:'italic'}}>Mike</span><span style={{color:'var(--azure)'}}>OssAzure</span></span>
            </a>
            <nav style={{display:'flex', gap:24, fontSize:13}}>
              {navLink('what-you-get', 'What you get')}
              {navLink('architecture', 'Architecture')}
              {navLink('install', 'Install')}
              {navLink('pricing', 'Pricing')}
              <a href="https://mikeoss.com" target="_blank" rel="noopener" style={{color:'var(--ink-2)'}}>About Mike <ExtLink/></a>
            </nav>
          </div>
          <div style={{display:'flex', gap:10, alignItems:'center'}}>
            <a href="https://calendly.com/altien-allenmorgan" target="_blank" rel="noopener" style={{fontSize:13, color:'var(--ink-2)'}}>Book a call</a>
            <a onClick={onMarketplaceClick} style={{fontSize:13, padding:'8px 14px', background:'var(--azure)', color:'#fff', borderRadius:6, display:'inline-flex', gap:8, alignItems:'center', cursor:'pointer'}}>
              Get it on Azure Marketplace <Caret size={11}/>
            </a>
          </div>
        </div>
      </header>
    );
  }

  /* ---------- HERO ---------- */
  function Hero({headlineStyle, onMarketplaceClick}) {
    return (
      <section style={{position:'relative', overflow:'hidden'}}>
        <div style={{maxWidth:1280, margin:'0 auto', padding:'72px 32px 56px'}}>
          <div style={{display:'inline-flex', alignItems:'center', gap:10, padding:'6px 12px', border:'1px solid var(--line)', borderRadius:99, fontSize:12, color:'var(--ink-2)', background:'var(--paper-2)', marginBottom:32}}>
            <Dot c="#0ba666"/>
            <span><b style={{color:'var(--ink)'}}>Mike OSS</b>, deployed natively to your Azure tenant</span>
            <span style={{color:'var(--ink-3)'}}>·</span>
            <span style={{color:'var(--ink-3)'}}>AGPL-3.0</span>
          </div>

          <h1 style={{
            fontFamily: headlineStyle==='serif' ? 'var(--serif)' : 'var(--ui)',
            fontWeight: headlineStyle==='serif' ? 400 : 500,
            fontSize:'clamp(48px, 7vw, 104px)', lineHeight:0.98,
            letterSpacing:'-0.02em', margin:'0 0 28px', maxWidth:1180, color:'var(--ink)'
          }}>
            Open-source legal AI,{' '}
            <span style={{fontStyle: headlineStyle==='serif' ? 'italic' : 'normal', color:'var(--ink-3)'}}>
              behind your firewall.
            </span>
          </h1>
          <p style={{fontSize:19, lineHeight:1.5, color:'var(--ink-2)', maxWidth:680, margin:'0 0 18px'}}>
            <a href="https://mikeoss.com" target="_blank" rel="noopener" style={{borderBottom:'1px solid currentColor'}}>Mike</a> is the open-source alternative to Harvey and Legora. We package it for Azure so your firm doesn't have to wire up Supabase, learn a new auth stack, or expose anything to the public internet.
          </p>
          <p style={{fontSize:15, lineHeight:1.55, color:'var(--ink-3)', maxWidth:680, margin:'0 0 36px'}}>
            One‑click install from the Azure Marketplace. Runs on native Azure components. Authenticates with the same Microsoft Entra ID that already gates your Outlook and SharePoint. <b style={{color:'var(--ink-2)'}}>No one outside your tenant can even reach the login screen.</b>
          </p>
          <div style={{display:'flex', gap:12, alignItems:'center', flexWrap:'wrap', marginBottom:64}}>
            <a onClick={onMarketplaceClick} style={{padding:'14px 22px', background:'var(--azure)', color:'#fff', borderRadius:8, fontSize:14, fontWeight:500, display:'inline-flex', gap:8, alignItems:'center', cursor:'pointer'}}>
              <AzureMark size={16}/> Deploy from Azure Marketplace <Caret/>
            </a>
            <a href="https://github.com/Altien/mikeOssAzure" target="_blank" rel="noopener" style={{padding:'14px 22px', border:'1px solid var(--line)', borderRadius:8, fontSize:14, color:'var(--ink-2)', display:'inline-flex', gap:8, alignItems:'center'}}>
              View source on GitHub <ExtLink/>
            </a>
            <span style={{fontSize:12, color:'var(--ink-3)', marginLeft:4}}>
              Free · AGPL-3.0 · Maintained by <a style={{borderBottom:'1px dotted currentColor'}}>Altien</a>
            </span>
          </div>

          <ProductMock/>
          <p style={{fontSize:12, color:'var(--ink-3)', fontStyle:'italic', textAlign:'center', margin:'14px 0 0', lineHeight:1.5}}>
            * Screenshot entirely invented by AI for a representative impression of the Mike AI experience. Visit <a href="https://mikeoss.com" target="_blank" rel="noopener" style={{borderBottom:'1px dotted currentColor', color:'inherit'}}>mikeoss.com</a> to see the real product video.
          </p>
        </div>
      </section>
    );
  }

  /* ---------- PRODUCT MOCK ---------- */
  function ProductMock() {
    return (
      <div style={{border:'1px solid var(--line)', borderRadius:14, background:'var(--paper-2)', boxShadow:'0 30px 60px -30px rgba(0,0,0,0.25)', overflow:'hidden'}}>
        <div style={{display:'flex', alignItems:'center', gap:8, padding:'10px 14px', borderBottom:'1px solid var(--line)', background:'color-mix(in srgb, var(--paper) 60%, transparent)'}}>
          <div style={{display:'flex', gap:6}}>
            <span style={{width:11, height:11, borderRadius:99, background:'#e8c5c0'}}/>
            <span style={{width:11, height:11, borderRadius:99, background:'#e8d8b0'}}/>
            <span style={{width:11, height:11, borderRadius:99, background:'#c5d8b8'}}/>
          </div>
          <div style={{flex:1, textAlign:'center', fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-3)'}}>
            mike.<b style={{color:'var(--ink-2)'}}>yourfirm</b>.internal · 🔒 private endpoint · entra: signed in as e.marsh@yourfirm.com
          </div>
          <span style={{fontSize:11, color:'var(--ink-3)', fontFamily:'var(--mono)'}}>mike v0.4.x</span>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'220px 1fr 360px', minHeight:520}}>
          <aside style={{borderRight:'1px solid var(--line)', padding:'18px 14px', fontSize:13, background:'color-mix(in srgb, var(--paper) 40%, transparent)'}}>
            <div style={{fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:12}}>Projects</div>
            {[
              ['Acme × NovaCorp Merger', true, 'M&A'],
              ['Helix Therapeutics IPO', false, 'Cap. mkts'],
              ['Sterling vs. Federal Tr.', false, 'Lit.'],
              ['MSA — Vertex Partners', false, 'Comm.'],
              ['Lease portfolio review', false, 'RE'],
            ].map(([n, active, tag], i) => (
              <div key={i} style={{padding:'8px 10px', borderRadius:6, marginBottom:2, background: active ? 'var(--ink)' : 'transparent', color: active ? 'var(--paper)' : 'var(--ink-2)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                <span style={{whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis', maxWidth:140}}>{n}</span>
                <span style={{fontSize:9, opacity:0.6, fontFamily:'var(--mono)'}}>{tag}</span>
              </div>
            ))}
            <div style={{fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.1em', margin:'24px 0 12px'}}>Workflows</div>
            {['Assistant','Drafting','Tabular Review','Citations','Vault'].map((n,i)=>(
              <div key={i} style={{padding:'7px 10px', color:'var(--ink-2)', display:'flex', alignItems:'center', gap:8}}>
                <span style={{width:4, height:4, borderRadius:99, background:'var(--ink-3)'}}/>{n}
              </div>
            ))}
            <div style={{marginTop:18, padding:'10px 12px', border:'1px dashed var(--line)', borderRadius:8, fontSize:11, color:'var(--ink-3)', lineHeight:1.5}}>
              <b style={{color:'var(--ink-2)', fontFamily:'var(--ui)'}}>Tenant:</b> yourfirm.onmicrosoft.com<br/>
              <b style={{color:'var(--ink-2)', fontFamily:'var(--ui)'}}>Region:</b> West Europe<br/>
              <b style={{color:'var(--ink-2)', fontFamily:'var(--ui)'}}>Network:</b> Private VNet only
            </div>
          </aside>

          <main style={{padding:'24px 28px', borderRight:'1px solid var(--line)', overflow:'hidden'}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18}}>
              <div>
                <div style={{fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.1em'}}>Document · Section 4</div>
                <div style={{fontSize:15, fontWeight:500, marginTop:3}}>Stock Purchase Agreement</div>
              </div>
              <div style={{display:'flex', gap:6}}>
                <button style={{padding:'5px 10px', border:'1px solid var(--line)', borderRadius:6, fontSize:11, background:'transparent', color:'var(--ink-2)'}}>Compare</button>
                <button style={{padding:'5px 10px', border:'1px solid var(--line)', borderRadius:6, fontSize:11, background:'transparent', color:'var(--ink-2)'}}>Open in Word</button>
                <button style={{padding:'5px 10px', borderRadius:6, fontSize:11, background:'var(--ink)', color:'var(--paper)', border:'none'}}>Save</button>
              </div>
            </div>

            <div style={{fontFamily:'Georgia, serif', fontSize:13, lineHeight:1.7, color:'var(--ink)'}}>
              <p style={{margin:'0 0 12px'}}><b>4.1 Representations and Warranties.</b> Each Seller hereby represents and warrants to Buyer, severally and not jointly, as of the date hereof and as of the Closing Date, that the statements contained in this <u style={{textDecoration:'none', borderBottom:'1px dotted var(--ink-3)'}}>Article IV</u> are true and correct.</p>
              <p style={{margin:'0 0 12px'}}>
                <span style={{background:'rgba(0,120,212,0.14)', borderBottom:'2px solid var(--azure)'}}>4.2 Indemnification Cap. The aggregate liability of each Seller for indemnification claims arising under Section 7.2(a)</span> shall not exceed <span style={{background:'#fff5b8', padding:'0 2px'}}>twenty percent (20%)</span> of such Seller's Pro Rata Share of the Final Purchase Price.
              </p>
              <p style={{margin:'0 0 12px', color:'var(--ink-3)'}}>
                <span style={{textDecoration:'line-through'}}>4.3 Fundamental Representations. Notwithstanding the foregoing, the cap set forth in Section 4.2 shall not apply to breaches of Fundamental Representations.</span>
              </p>
              <p style={{margin:'0 0 12px', background:'rgba(11,166,102,0.08)', padding:'8px 10px', borderLeft:'2px solid #0ba666', borderRadius:'0 4px 4px 0'}}>
                <b style={{color:'#0ba666'}}>+ Inserted </b>4.3 Fundamental Representations and Specified Indemnities. The cap set forth in Section 4.2 shall not apply to breaches of Fundamental Representations or to claims arising under Section 7.2(c) (Specified Tax Matters).
              </p>
              <p style={{color:'var(--ink-2)'}}>4.4 Survival. The representations and warranties shall survive the Closing for a period of <span style={{color:'var(--azure)', borderBottom:'1px solid var(--azure)'}}>eighteen (18) months</span>…</p>
            </div>
          </main>

          <aside style={{padding:'18px 18px', display:'flex', flexDirection:'column', gap:14, background:'color-mix(in srgb, var(--paper) 30%, transparent)'}}>
            <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <div style={{display:'flex', alignItems:'center', gap:8}}>
                <span style={{width:22, height:22, borderRadius:6, background:'var(--azure)', color:'#fff', display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize:14, fontFamily:'var(--serif)', fontStyle:'italic'}}>M</span>
                <div style={{fontSize:13, fontWeight:500}}>Mike Assistant</div>
              </div>
              <span style={{fontSize:10, fontFamily:'var(--mono)', color:'var(--ink-3)'}}>azure-openai · gpt-4o</span>
            </div>

            <div style={{fontSize:12, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.08em', fontFamily:'var(--mono)'}}>You</div>
            <div style={{fontSize:13, lineHeight:1.55}}>Compare Section 4.2's indemnification cap against our Acme precedent library and flag any deviation from firm playbook.</div>

            <div style={{fontSize:12, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.08em', fontFamily:'var(--mono)'}}>Mike · 3 sources cited</div>
            <div style={{fontSize:13, lineHeight:1.55, color:'var(--ink-2)', display:'flex', flexDirection:'column', gap:8}}>
              <div>The current cap of <b style={{color:'var(--ink)'}}>20%</b> deviates from firm playbook (<b style={{color:'var(--ink)'}}>15% standard, 25% ceiling</b>).</div>
              <div style={{padding:'10px 12px', border:'1px solid var(--line)', borderRadius:8, background:'var(--paper)'}}>
                <div style={{fontSize:11, color:'var(--ink-3)', marginBottom:4}}>Acme — Brightline SPA (2024)</div>
                <div style={{fontSize:12}}>Cap: 15% · Survival: 18mo · Fund. carveouts ✓</div>
              </div>
              <div style={{padding:'10px 12px', border:'1px solid var(--line)', borderRadius:8, background:'var(--paper)'}}>
                <div style={{fontSize:11, color:'var(--ink-3)', marginBottom:4}}>Acme — Helix Acquisition (2023)</div>
                <div style={{fontSize:12}}>Cap: 17.5% · Survival: 24mo</div>
              </div>
              <div style={{display:'flex', gap:6, marginTop:4}}>
                <button style={{padding:'6px 10px', borderRadius:6, fontSize:11, background:'var(--ink)', color:'var(--paper)', border:'none'}}>Apply playbook</button>
                <button style={{padding:'6px 10px', borderRadius:6, fontSize:11, border:'1px solid var(--line)', background:'transparent', color:'var(--ink-2)'}}>Show passages</button>
              </div>
            </div>

            <div style={{marginTop:'auto', border:'1px solid var(--line)', borderRadius:10, padding:'10px 12px', background:'var(--paper)', display:'flex', alignItems:'center', gap:8}}>
              <span style={{fontSize:13, color:'var(--ink-3)', flex:1}}>Ask about this project…</span>
              <span style={{fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-3)', padding:'2px 5px', border:'1px solid var(--line)', borderRadius:4}}>⌘K</span>
            </div>
          </aside>
        </div>
      </div>
    );
  }

  /* ---------- PROBLEM / SOLUTION ---------- */
  function ProblemSolution() {
    return (
      <section style={{padding:'120px 32px', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-3)', marginBottom:24}}>Why we exist</div>
          <h2 style={{fontFamily:'var(--serif)', fontWeight:400, fontSize:'clamp(34px, 4.2vw, 58px)', lineHeight:1.05, letterSpacing:'-0.02em', margin:'0 0 64px', whiteSpace:'nowrap'}}>
            Mike is brilliant. <span style={{fontStyle:'italic', color:'var(--ink-3)'}}>Setting it up isn't a lawyer's job.</span>
          </h2>

          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:1, background:'var(--line)', border:'1px solid var(--line)', borderRadius:12, overflow:'hidden'}}>
            <div style={{padding:'40px 36px', background:'var(--paper)'}}>
              <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.12em', marginBottom:16}}>Vanilla Mike OSS</div>
              <h3 style={{fontFamily:'var(--serif)', fontWeight:400, fontSize:30, margin:'0 0 20px'}}>Brilliant code, but…</h3>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:14, fontSize:14, color:'var(--ink-2)', lineHeight:1.55}}>
                <li>— You install <b>Supabase</b> and learn a new auth model</li>
                <li>— You provision <b>Postgres + pgvector</b>, object storage, queues</li>
                <li>— Your IT team manages <b>another set of credentials</b> (not Entra)</li>
                <li>— Default deployments live on the public internet — <b>anyone can reach the login page</b></li>
                <li>— Updates are your responsibility forever</li>
                <li>— Procurement asks <i>"who owns the security boundary?"</i> and you don't have a clean answer</li>
              </ul>
            </div>

            <div style={{padding:'40px 36px', background:'var(--azure-soft)', position:'relative'}}>
              <div style={{position:'absolute', top:36, right:36}}><AzureMark size={28}/></div>
              <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--azure-deep)', textTransform:'uppercase', letterSpacing:'0.12em', marginBottom:16}}>Mike, on your Azure tenant</div>
              <h3 style={{fontFamily:'var(--serif)', fontWeight:400, fontSize:30, margin:'0 0 20px', color:'var(--azure-deep)'}}>Same software. None of the setup.</h3>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:14, fontSize:14, color:'var(--ink)', lineHeight:1.55}}>
                <li style={{display:'flex', gap:10, alignItems:'flex-start'}}><span style={{flexShrink:0, marginTop:3}}><Check/></span><span>One-click deploy from the <b>Azure Marketplace</b></span></li>
                <li style={{display:'flex', gap:10, alignItems:'flex-start'}}><span style={{flexShrink:0, marginTop:3}}><Check/></span><span>Sign in with <b>the same Entra ID</b> as Outlook &amp; SharePoint</span></li>
                <li style={{display:'flex', gap:10, alignItems:'flex-start'}}><span style={{flexShrink:0, marginTop:3}}><Check/></span><span>Native Azure components — <b>Postgres Flexible, Blob, Key Vault, App Service</b></span></li>
                <li style={{display:'flex', gap:10, alignItems:'flex-start'}}><span style={{flexShrink:0, marginTop:3}}><Check/></span><span>Deployed inside <b>your Virtual Network</b>. Random people on the internet can't even hit the login page.</span></li>
                <li style={{display:'flex', gap:10, alignItems:'flex-start'}}><span style={{flexShrink:0, marginTop:3}}><Check/></span><span>We track upstream Mike and ship updates to the Marketplace listing</span></li>
                <li style={{display:'flex', gap:10, alignItems:'flex-start'}}><span style={{flexShrink:0, marginTop:3}}><Check/></span><span>Procurement gets a familiar answer: "It's a Microsoft Azure offering."</span></li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    );
  }

  /* ---------- ARCHITECTURE DIAGRAM ---------- */
  function Architecture() {
    const Box = ({title, sub, w='100%'}) => (
      <div style={{border:'1px solid var(--line)', background:'var(--paper)', padding:'10px 12px', borderRadius:6, fontSize:12, width:w}}>
        <div style={{fontWeight:500, color:'var(--ink)'}}>{title}</div>
        <div style={{fontSize:10, color:'var(--ink-3)', marginTop:2}}>{sub}</div>
      </div>
    );
    return (
      <section style={{padding:'120px 32px', borderBottom:'1px solid var(--line)', background:'var(--paper-2)'}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-3)', marginBottom:18}}>Architecture</div>
          <h2 style={{fontFamily:'var(--serif)', fontWeight:400, fontSize:'clamp(34px,4.2vw,52px)', lineHeight:1.05, letterSpacing:'-0.02em', margin:'0 0 16px', whiteSpace:'nowrap'}}>
            Every component is Azure-native. <span style={{fontStyle:'italic', color:'var(--ink-3)'}}>Nothing leaves your tenant.</span>
          </h2>
          <p style={{fontSize:15, color:'var(--ink-2)', maxWidth:680, margin:'0 0 56px', lineHeight:1.6}}>
            We map every dependency Mike needs onto a managed Azure service your IT team already trusts. No Supabase. No third-party auth. No data egress.
          </p>

          <div style={{border:'2px dashed var(--azure)', borderRadius:14, padding:'32px 28px', background:'var(--paper)', position:'relative'}}>
            <div style={{position:'absolute', top:-12, left:24, background:'var(--paper-2)', padding:'0 12px', fontFamily:'var(--mono)', fontSize:11, color:'var(--azure)', letterSpacing:'0.12em', textTransform:'uppercase', display:'inline-flex', alignItems:'center', gap:8}}>
              <AzureMark size={14}/> Your Azure tenant · private VNet
            </div>

            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:24, marginBottom:24}}>
              <div style={{display:'flex', flexDirection:'column', gap:10}}>
                <div style={{fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:4}}>Identity</div>
                <Box title="Microsoft Entra ID" sub="Same SSO as Outlook / SharePoint / Teams"/>
                <Box title="Conditional Access" sub="MFA · device compliance · location"/>
              </div>
              <div style={{display:'flex', flexDirection:'column', gap:10}}>
                <div style={{fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:4}}>Compute</div>
                <Box title="Azure App Service" sub="Mike frontend (Next.js)"/>
                <Box title="Azure Container Apps" sub="Mike backend (Express)"/>
                <Box title="Azure OpenAI" sub="GPT-4o · embeddings · BYO model OK"/>
              </div>
              <div style={{display:'flex', flexDirection:'column', gap:10}}>
                <div style={{fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:4}}>Data &amp; secrets</div>
                <Box title="Azure Database for PostgreSQL" sub="Flexible Server · pgvector enabled"/>
                <Box title="Azure Blob Storage" sub="Documents · private endpoint"/>
                <Box title="Azure Key Vault" sub="LLM API keys, signing secrets"/>
              </div>
            </div>

            <div style={{height:1, background:'var(--line)', margin:'8px 0 20px'}}/>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:24}}>
              <Box title="Application Gateway + WAF" sub="Private endpoint · no public IP"/>
              <Box title="Azure Monitor + Log Analytics" sub="Audit log · 7-year retention option"/>
              <Box title="Microsoft Defender for Cloud" sub="Posture &amp; threat detection"/>
            </div>
          </div>

          <div style={{display:'flex', gap:24, marginTop:32, flexWrap:'wrap', fontSize:13, color:'var(--ink-2)'}}>
            <span style={{display:'inline-flex', alignItems:'center', gap:8}}><Dot c="#0ba666"/> Inside your firewall</span>
            <span style={{display:'inline-flex', alignItems:'center', gap:8}}><Dot c="#0ba666"/> Inside your data residency</span>
            <span style={{display:'inline-flex', alignItems:'center', gap:8}}><Dot c="#0ba666"/> Inside your SOC's existing telemetry</span>
            <span style={{display:'inline-flex', alignItems:'center', gap:8}}><Dot c="#0ba666"/> Outside everyone else's reach</span>
          </div>
        </div>
      </section>
    );
  }

  /* ---------- WHAT MIKE DOES (faithful to the upstream feature set) ---------- */
  function FeatureSet() {
    const m = [
      { t:'Assistant', d:'Chat over your matter. Reads documents, cites verbatim passages, runs multi-step workflows.' },
      { t:'Drafting', d:'Generate and edit contracts, motions and memos. Track changes inline, jump straight to source.' },
      { t:'Projects (Vault)', d:'Matter-specific workspaces. Upload large document sets. Conversational context persists across all materials.' },
      { t:'Tabular Review', d:'Extract structured data across hundreds of documents into a queryable spreadsheet, every cell traceable to source.' },
      { t:'Citations', d:'Verbatim passage citations on every answer. No invented case names. Your lawyers can verify every line.' },
      { t:'BYO model keys', d:'Plug in your Azure OpenAI deployment, or your own Claude / Gemini keys. Zero LLM licensing cost on top.' },
    ];
    return (
      <section style={{padding:'120px 32px', borderBottom:'1px solid var(--line)'}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div style={{display:'flex', flexDirection:'column', alignItems:'flex-start', marginBottom:48, gap:20}}>
            <div>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-3)', marginBottom:18}}>What you get</div>
              <h2 style={{fontFamily:'var(--serif)', fontWeight:400, fontSize:'clamp(36px,4.6vw,56px)', lineHeight:1.05, letterSpacing:'-0.02em', margin:0, maxWidth:780}}>
                The full Mike feature set. <span style={{fontStyle:'italic', color:'var(--ink-3)'}}>Unchanged.</span>
              </h2>
            </div>
            <p style={{maxWidth:680, fontSize:15, color:'var(--ink-2)', lineHeight:1.6, margin:0}}>
              We don't fork Mike. We don't gate features. The whole upstream platform ships exactly as <a href="https://mikeoss.com" target="_blank" rel="noopener" style={{borderBottom:'1px dotted currentColor'}}>mikeoss.com</a> describes — only the deployment is ours.
            </p>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:1, background:'var(--line)', border:'1px solid var(--line)', borderRadius:12, overflow:'hidden'}}>
            {m.map(x=>(
              <div key={x.t} style={{padding:'32px 28px', background:'var(--paper)', minHeight:180}}>
                <h3 style={{fontFamily:'var(--serif)', fontWeight:400, fontSize:24, margin:'0 0 8px'}}>{x.t}</h3>
                <p style={{fontSize:14, color:'var(--ink-2)', lineHeight:1.55, margin:0}}>{x.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ---------- INSTALL FLOW ---------- */
  function Install({onMarketplaceClick}) {
    const steps = [
      ['1', 'Find on Azure Marketplace', 'Search "Mike OSS" in the Azure portal. Listing is published by Altien Ltd.'],
      ['2', 'Pick a subscription + resource group', 'Standard ARM template. Choose your region for data residency.'],
      ['3', 'Wire up Entra ID', 'One enterprise-app registration. Your existing Conditional Access policies apply automatically.'],
      ['4', 'Bring your model keys', 'Azure OpenAI by default. Or paste your Anthropic / Gemini key into Key Vault.'],
      ['5', 'Click Deploy', 'About 18 minutes. You end up with a private URL on your VNet, gated by Entra.'],
    ];
    return (
      <section style={{padding:'120px 32px', borderBottom:'1px solid var(--line)', background:'var(--paper-2)'}}>
        <div style={{maxWidth:1280, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:80, alignItems:'flex-start'}}>
          <div style={{position:'sticky', top:100}}>
            <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-3)', marginBottom:18}}>Install</div>
            <h2 style={{fontFamily:'var(--serif)', fontWeight:400, fontSize:'clamp(34px,4.4vw,56px)', lineHeight:1.05, letterSpacing:'-0.02em', margin:'0 0 20px'}}>
              From Marketplace<br/>to logged-in lawyer<br/><span style={{fontStyle:'italic', color:'var(--ink-3)'}}>in under 20 minutes.</span>
            </h2>
            <p style={{fontSize:15, color:'var(--ink-2)', lineHeight:1.6, margin:'0 0 24px', maxWidth:420}}>
              No Supabase project. No new identity provider. No public DNS. Your IT team will recognise every step.
            </p>
            <a onClick={onMarketplaceClick} style={{padding:'12px 18px', background:'var(--azure)', color:'#fff', borderRadius:6, fontSize:13, display:'inline-flex', gap:8, alignItems:'center', cursor:'pointer'}}>
              <AzureMark size={14}/> Open in Azure Marketplace <Caret/>
            </a>
          </div>

          <ol style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:0, borderLeft:'1px solid var(--line)'}}>
            {steps.map(([n, t, d])=>(
              <li key={n} style={{padding:'24px 0 24px 32px', position:'relative'}}>
                <span style={{position:'absolute', left:-13, top:24, width:26, height:26, borderRadius:99, background:'var(--paper)', border:'1px solid var(--line)', fontFamily:'var(--mono)', fontSize:12, display:'inline-flex', alignItems:'center', justifyContent:'center', color:'var(--azure)'}}>{n}</span>
                <h3 style={{fontFamily:'var(--serif)', fontWeight:400, fontSize:24, margin:'0 0 8px'}}>{t}</h3>
                <p style={{fontSize:14, color:'var(--ink-2)', lineHeight:1.6, margin:0, maxWidth:520}}>{d}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>
    );
  }

  /* ---------- PRICING ---------- */
  function Pricing({onMarketplaceClick, onBookCallClick}) {
    return (
      <section style={{padding:'120px 32px', borderBottom:'1px solid var(--line)'}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div style={{textAlign:'center', marginBottom:64}}>
            <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-3)', marginBottom:18}}>Pricing</div>
            <h2 style={{fontFamily:'var(--serif)', fontWeight:400, fontSize:'clamp(36px,4.6vw,64px)', lineHeight:1.05, letterSpacing:'-0.02em', margin:'0 0 16px'}}>
              The software is free. <span style={{fontStyle:'italic', color:'var(--ink-3)'}}>We charge for our time.</span>
            </h2>
            <p style={{fontSize:15, color:'var(--ink-2)', maxWidth:620, margin:'0 auto', lineHeight:1.6}}>
              Mike is AGPL-3.0 and free. The Azure Marketplace listing is free (for now). You only pay Microsoft for the Azure resources you consume — and us, by the hour, if you want help.
            </p>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
            {[
              { name:'The software', price:'£0', unit:'AGPL-3.0 · forever', sub:'Mike OSS, exactly as upstream', features:['Full feature set','BYO model keys','Source on GitHub','Roll your own deploy if you prefer'], cta:'View on GitHub', ctaHref:'https://github.com/Altien/mikeOssAzure', accent:'var(--ink-3)' },
              { name:'Azure Marketplace listing', price:'Free', unit:'for now', sub:'One-click deploy onto your tenant', features:['ARM template + Bicep','Entra ID wired up','Private VNet by default','Tracks upstream Mike releases','We maintain the listing'], cta:'Get it on Marketplace', accent:'var(--azure)', featured:true, onCtaClick:onMarketplaceClick },
              { name:'Customisation &amp; support', price:'£180', unit:'per hour · ex VAT', sub:'When you need a human', features:['Bespoke workflows for your practice','DMS / iManage / NetDocs integration','Fine-tune playbooks on firm precedent','Procurement, security review support','Pay only for hours used'], cta:'Book a scoping call', accent:'var(--ink)', ctaHref:'https://calendly.com/altien-allenmorgan' },
            ].map(t=>(
              <div key={t.name} style={{
                padding:'32px 28px',
                border: t.featured ? '1px solid var(--azure)' : '1px solid var(--line)',
                borderRadius:12,
                background: t.featured ? 'linear-gradient(180deg, var(--azure-soft) 0%, var(--paper) 100%)' : 'var(--paper)',
                color:'var(--ink)',
                display:'flex', flexDirection:'column', gap:18,
                position:'relative'
              }}>
                {t.featured && <span style={{position:'absolute', top:-10, left:24, background:'var(--azure)', color:'#fff', fontFamily:'var(--mono)', fontSize:9, letterSpacing:'0.1em', padding:'3px 8px', borderRadius:4}}>RECOMMENDED</span>}
                <div>
                  <h3 style={{fontFamily:'var(--serif)', fontWeight:400, fontSize:26, margin:'0 0 6px'}} dangerouslySetInnerHTML={{__html:t.name}}/>
                  <div style={{fontSize:13, color:'var(--ink-3)'}}>{t.sub}</div>
                </div>
                <div style={{display:'flex', flexDirection:'column', gap:4}}>
                  <span style={{fontFamily:'var(--serif)', fontSize:52, lineHeight:1, fontWeight:400}}>{t.price}</span>
                  <span style={{fontSize:13, color:'var(--ink-3)'}}>{t.unit}</span>
                </div>
                <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10, flex:1}}>
                  {t.features.map(f=>(
                    <li key={f} style={{display:'flex', gap:10, alignItems:'flex-start', fontSize:14, color:'var(--ink-2)', lineHeight:1.5}}>
                      <span style={{marginTop:2, color:t.accent}}><Check/></span>{f}
                    </li>
                  ))}
                </ul>
                <a
                  href={t.ctaHref}
                  onClick={t.onCtaClick}
                  target={t.ctaHref ? '_blank' : undefined}
                  rel="noopener"
                  style={{
                    padding:'12px 16px', borderRadius:8, fontSize:13, fontWeight:500, textAlign:'center',
                    background: t.featured ? 'var(--azure)' : 'var(--ink)',
                    color: '#fff',
                    cursor: t.onCtaClick ? 'pointer' : undefined
                  }}>{t.cta} →</a>
              </div>
            ))}
          </div>

          <div style={{marginTop:32, padding:'18px 22px', border:'1px dashed var(--line)', borderRadius:10, background:'var(--paper-2)', fontSize:13, color:'var(--ink-2)', lineHeight:1.6}}>
            <b style={{color:'var(--ink)'}}>About "free, for now":</b> we may introduce a flat, transparent listing fee in future to fund continued maintenance. We will give 90 days' notice. Existing deployments will continue to work — Mike is AGPL-3.0; nothing in the marketplace listing locks you in.
          </div>
        </div>
      </section>
    );
  }

  /* ---------- CREDIT TO MIKE ---------- */
  function CreditMike() {
    return (
      <section style={{padding:'120px 32px', borderBottom:'1px solid var(--line)', background:'var(--paper-2)'}}>
        <div style={{maxWidth:980, margin:'0 auto', textAlign:'center'}}>
          <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-3)', marginBottom:32}}>Credit where it's due</div>
          <h2 style={{fontFamily:'var(--serif)', fontWeight:400, fontSize:'clamp(32px,4vw,52px)', lineHeight:1.1, letterSpacing:'-0.01em', color:'var(--ink)', margin:'0 0 28px'}}>
            We didn't build Mike. <span style={{fontStyle:'italic', color:'var(--ink-3)'}}>Will Chen did.</span>
          </h2>
          <p style={{fontSize:16, color:'var(--ink-2)', lineHeight:1.65, maxWidth:720, margin:'0 auto 36px'}}>
            Mike is an open-source legal AI platform created by Will Chen, formerly of Latham &amp; Watkins. It is the upstream project. We are an independent team that packages it for Azure so firms with Microsoft-shop IT can deploy it cleanly. All credit for the product itself belongs to the Mike maintainers. If you can roll your own deployment from source — please do.
          </p>
          <div style={{display:'inline-flex', gap:12, flexWrap:'wrap', justifyContent:'center'}}>
            <a href="https://mikeoss.com" target="_blank" rel="noopener" style={{padding:'12px 18px', border:'1px solid var(--line)', borderRadius:8, fontSize:13, color:'var(--ink)', display:'inline-flex', gap:8, alignItems:'center', background:'var(--paper)'}}>
              mikeoss.com <ExtLink/>
            </a>
            <a href="https://github.com/Altien/mikeOssAzure" target="_blank" rel="noopener" style={{padding:'12px 18px', border:'1px solid var(--line)', borderRadius:8, fontSize:13, color:'var(--ink)', display:'inline-flex', gap:8, alignItems:'center', background:'var(--paper)'}}>
              github.com/Altien/mikeOssAzure <ExtLink/>
            </a>
            <a href="https://www.artificiallawyer.com/2026/05/04/mike-the-open-source-legal-ai-platform-will-chen-interview/" target="_blank" rel="noopener" style={{padding:'12px 18px', border:'1px solid var(--line)', borderRadius:8, fontSize:13, color:'var(--ink)', display:'inline-flex', gap:8, alignItems:'center', background:'var(--paper)'}}>
              Will Chen interview · Artificial Lawyer <ExtLink/>
            </a>
          </div>
        </div>
      </section>
    );
  }

  /* ---------- FAQ ---------- */
  function FAQ() {
    const items = [
      ['Are you affiliated with Mike OSS / Will Chen?', "No. We're an independent team. Mike is created and maintained by Will Chen and contributors at github.com/Altien/mikeOssAzure. We package it for Azure under the AGPL-3.0 licence. We pay our own hosting; we do not take a cut of yours."],
      ['Why "free for now"?', "Maintaining an Azure Marketplace listing has a real cost — keeping pace with upstream Mike releases, security patches, and Azure platform changes. Today we're absorbing that cost. We may introduce a small flat listing fee later. We'll always give 90 days' notice and existing installs will keep working."],
      ['What is AGPL-3.0 and does it affect my firm?', "AGPL-3.0 is a strong copyleft licence. If you use Mike internally inside your firm, you are not required to publish anything. Obligations only attach if you offer Mike-as-a-service to outside parties. For typical law-firm internal use, AGPL is not a problem. Your IT counsel should still confirm."],
      ['Where do my documents live?', "On your Azure tenant, in your subscription, in the region you choose, on Azure Blob Storage with private endpoints. Nothing routes through us. We have no access."],
      ['What about case law / legal research?', "Mike does not include a proprietary case-law database (like Westlaw or LexisNexis). It cites passages from the documents you upload to the Vault. For external legal research, plug in your existing subscription."],
      ['Can we hire you to customise it?', "Yes. £180/hour ex VAT. Typical engagements: DMS integrations, custom workflows, security review support, fine-tuning prompt templates on firm precedent. Pay only for hours used. We can also do fixed-price scopes."],
    ];
    const [open, setOpen] = useState(0);
    return (
      <section style={{padding:'120px 32px', borderBottom:'1px solid var(--line)'}}>
        <div style={{maxWidth:980, margin:'0 auto'}}>
          <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--ink-3)', marginBottom:18}}>FAQ</div>
          <h2 style={{fontFamily:'var(--serif)', fontWeight:400, fontSize:'clamp(36px,4.6vw,56px)', lineHeight:1.05, letterSpacing:'-0.02em', margin:'0 0 48px'}}>
            What firms ask first.
          </h2>
          <div style={{borderTop:'1px solid var(--line)'}}>
            {items.map(([q,a], i)=>(
              <div key={i} style={{borderBottom:'1px solid var(--line)'}}>
                <button onClick={()=>setOpen(open===i?-1:i)} style={{width:'100%', textAlign:'left', padding:'22px 0', background:'transparent', border:'none', cursor:'pointer', display:'flex', justifyContent:'space-between', alignItems:'center', gap:24, fontFamily:'var(--serif)', fontSize:22, color:'var(--ink)', fontWeight:400}}>
                  <span>{q}</span>
                  <span style={{fontFamily:'var(--ui)', fontSize:24, color:'var(--ink-3)', transition:'transform 200ms', transform: open===i ? 'rotate(45deg)' : 'rotate(0)'}}>+</span>
                </button>
                {open===i && (
                  <div style={{paddingBottom:24, fontSize:15, color:'var(--ink-2)', lineHeight:1.65, maxWidth:780}}>
                    {a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ---------- FINAL CTA ---------- */
  function FinalCTA({onMarketplaceClick, onBookCallClick}) {
    return (
      <section style={{padding:'140px 32px', borderBottom:'1px solid var(--line)', position:'relative', overflow:'hidden'}}>
        <div style={{maxWidth:1100, margin:'0 auto', textAlign:'center'}}>
          <h2 style={{fontFamily:'var(--serif)', fontWeight:400, fontSize:'clamp(48px,7vw,108px)', lineHeight:0.98, letterSpacing:'-0.025em', margin:'0 0 32px'}}>
            Same Mike.<br/><span style={{fontStyle:'italic', color:'var(--azure)'}}>Inside your tenant.</span>
          </h2>
          <p style={{fontSize:16, color:'var(--ink-2)', maxWidth:560, margin:'0 auto 36px', lineHeight:1.6}}>
            Free deployment. AGPL-3.0. Maintained against upstream. Pay us only when you want a human.
          </p>
          <div style={{display:'inline-flex', gap:12, flexWrap:'wrap', justifyContent:'center'}}>
            <a onClick={onMarketplaceClick} style={{padding:'16px 26px', background:'var(--azure)', color:'#fff', borderRadius:8, fontSize:14, fontWeight:500, display:'inline-flex', gap:8, alignItems:'center', cursor:'pointer'}}>
              <AzureMark size={16}/> Deploy from Azure Marketplace <Caret/>
            </a>
            <a href="https://calendly.com/altien-allenmorgan" target="_blank" rel="noopener" style={{padding:'16px 26px', border:'1px solid var(--line)', borderRadius:8, fontSize:14, color:'var(--ink-2)'}}>Book a 30-min call</a>
          </div>
        </div>
      </section>
    );
  }

  /* ---------- FOOTER ---------- */
  function Footer() {
    return (
      <footer style={{padding:'56px 32px 36px', background:'var(--paper)'}}>
        <div style={{maxWidth:1280, margin:'0 auto'}}>
          <div style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:40, paddingBottom:40, borderBottom:'1px solid var(--line)'}}>
            <div>
              <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:14}}>
                <AzureMark size={22}/>
                <div style={{fontFamily:'var(--serif)', fontSize:24}}>
                  <span style={{fontStyle:'italic'}}>Mike</span><span style={{color:'var(--azure)'}}>OssAzure</span>
                </div>
              </div>
              <p style={{fontSize:13, color:'var(--ink-3)', lineHeight:1.6, maxWidth:340, margin:'0 0 14px'}}>
                An Azure Marketplace deployment of <a href="https://mikeoss.com" target="_blank" rel="noopener" style={{color:'var(--ink-2)', borderBottom:'1px dotted currentColor'}}>Mike OSS</a> by Will Chen. Independent. Not affiliated with the Mike project — we package it under the terms of AGPL-3.0.
              </p>
              <p style={{fontSize:11, color:'var(--ink-3)', margin:0}}>Maintained by Altien Ltd · London</p>
            </div>
            {[
              ['MikeOssAzure',['What you get','Architecture','Install','Pricing','FAQ','Contact']],
              ['Upstream Mike',['mikeoss.com ↗','GitHub repo ↗','Will Chen interview ↗','AGPL-3.0 licence ↗','Contribute ↗']],
              ['Trust',['Security overview','Data residency','AGPL obligations','Privacy notice','Terms']],
            ].map(([h, items])=>(
              <div key={h}>
                <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--ink-3)', marginBottom:14}}>{h}</div>
                <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:8}}>
                  {items.map(i=> <li key={i} style={{fontSize:13, color:'var(--ink-2)'}}>{i}</li>)}
                </ul>
              </div>
            ))}
          </div>
          <div style={{display:'flex', justifyContent:'space-between', paddingTop:24, fontSize:12, color:'var(--ink-3)', flexWrap:'wrap', gap:12}}>
            <div>© 2026 Altien Ltd · Mike is © Will Chen, AGPL-3.0 · Azure and Microsoft Entra are trademarks of Microsoft Corporation</div>
            <div style={{display:'flex', gap:18}}>
              <a href="https://mikeoss.com" target="_blank" rel="noopener">mikeoss.com ↗</a>
              <a href="https://github.com/Altien/mikeOssAzure" target="_blank" rel="noopener">GitHub ↗</a>
            </div>
          </div>
        </div>
      </footer>
    );
  }

  /* ---------- FORM POPUP ---------- */
  function FormPopup({onClose, subtitle, scriptSrc, formId}) {
    useEffect(() => {
      const onKey = (e) => { if (e.key === 'Escape') onClose(); };
      document.addEventListener('keydown', onKey);
      return () => document.removeEventListener('keydown', onKey);
    }, [onClose]);

    useEffect(() => {
      const s = document.createElement('script');
      s.src = scriptSrc;
      s.defer = true;
      document.body.appendChild(s);
      return () => { if (document.body.contains(s)) document.body.removeChild(s); };
    }, [scriptSrc]);

    return (
      <div onClick={onClose} style={{position:'fixed', inset:0, zIndex:1000, background:'rgba(0,0,0,0.5)', display:'flex', alignItems:'center', justifyContent:'center', padding:24}}>
        <div onClick={e=>e.stopPropagation()} style={{background:'var(--paper)', borderRadius:16, width:'100%', maxWidth:560, boxShadow:'0 24px 64px rgba(0,0,0,0.2)', overflow:'hidden'}}>
          <div style={{padding:'24px 28px 6px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:16}}>
            <div>
              <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:6}}>
                <AzureMark size={20}/>
                <span style={{fontFamily:'var(--serif)', fontSize:22}}><span style={{fontStyle:'italic'}}>Mike</span><span style={{color:'var(--azure)'}}>OssAzure</span></span>
              </div>
              {subtitle && <p style={{fontSize:14, color:'var(--ink-2)', margin:0, lineHeight:1.5}}>{subtitle}</p>}
            </div>
            <button onClick={onClose} style={{appearance:'none', border:'none', background:'transparent', cursor:'pointer', color:'var(--ink-3)', fontSize:20, lineHeight:1, padding:4, flexShrink:0}}>✕</button>
          </div>
          <div className="hs-form-frame" data-region="eu1" data-form-id={formId} data-portal-id="145595718"></div>
        </div>
      </div>
    );
  }

  /* ---------- APP ---------- */
  function App() {
    const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULS);
    const [page, setPage] = useState('home');
    const [showMarketplace, setShowMarketplace] = useState(false);
    const [showBookCall, setShowBookCall] = useState(false);
    useEffect(()=>{ document.body.className = 'theme-' + tweaks.theme; }, [tweaks.theme]);
    useEffect(()=>{ window.scrollTo(0, 0); }, [page]);

    const navigate = (id) => setPage(id);
    const openMarketplace = () => setShowMarketplace(true);
    const openBookCall = () => setShowBookCall(true);

    return (
      <div data-screen-label="01 MikeOssAzure Landing">
        {tweaks.showLineageBanner && <LineageBanner/>}
        {showMarketplace && <FormPopup onClose={()=>setShowMarketplace(false)}
          subtitle=""
          scriptSrc="https://js-eu1.hsforms.net/forms/embed/145595718.js"
          formId="fbb7ac98-1507-4b38-b8d1-49092ed35b68"/>}
        {showBookCall && <FormPopup onClose={()=>setShowBookCall(false)}
          subtitle=""
          scriptSrc="https://js-eu1.hsforms.net/forms/embed/145595718.js"
          formId="76a26f91-9c8c-4d54-ae8d-f7667d50bcf9"/>}
        <Nav page={page} setPage={navigate} onMarketplaceClick={openMarketplace} onBookCallClick={openBookCall}/>
        {page === 'home' && <>
          <Hero headlineStyle={tweaks.headlineStyle} onMarketplaceClick={openMarketplace}/>
          <ProblemSolution/>
          <Architecture/>
          <FeatureSet/>
          <Install onMarketplaceClick={openMarketplace}/>
          <Pricing onMarketplaceClick={openMarketplace} onBookCallClick={openBookCall}/>
          <CreditMike/>
          <FAQ/>
          <FinalCTA onMarketplaceClick={openMarketplace} onBookCallClick={openBookCall}/>
        </>}
        {page === 'what-you-get' && <FeatureSet/>}
        {page === 'architecture' && <Architecture/>}
        {page === 'install'      && <Install onMarketplaceClick={openMarketplace}/>}
        {page === 'pricing'      && <Pricing onMarketplaceClick={openMarketplace} onBookCallClick={openBookCall}/>}
        <Footer/>

        <TweaksPanel title="Tweaks">
          <TweakSection title="Visual lean">
            <TweakRadio label="Theme" value={tweaks.theme} onChange={v=>setTweak('theme', v)} options={[
              {value:'paper', label:'Paper'},
              {value:'azure', label:'Azure white'},
              {value:'dark', label:'Dark'},
            ]}/>
            <TweakRadio label="Headlines" value={tweaks.headlineStyle} onChange={v=>setTweak('headlineStyle', v)} options={[
              {value:'serif', label:'Editorial serif'},
              {value:'sans', label:'Modern sans'},
            ]}/>
            <TweakToggle label="Show 'redistribution of Mike OSS' top banner" value={tweaks.showLineageBanner} onChange={v=>setTweak('showLineageBanner', v)}/>
          </TweakSection>
        </TweaksPanel>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
