/* Three visual directions — applied to interface fragments so reviewers
   can feel each style, not just look at swatches. */

const MB_W = 1280;
const MB_H = 860;

// ─────────────────────────────────────────────────────────────
// 01 · Editorial calma (Cereal magazine)
//   Generous whitespace, big serif moments, minimal chrome
// ─────────────────────────────────────────────────────────────
function MoodEditorial() {
  return (
    <div className="ab" style={{padding:'56px 64px', display:'flex', flexDirection:'column', gap:36}}>
      {/* top mark */}
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
        <SectionMark n={1} label="Direção · Editorial calma" />
        <div className="smallcaps tab">RVDE / B2B Pro</div>
      </div>

      {/* hero quote */}
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'flex-start'}}>
        <div>
          <Title size={92} italic style={{lineHeight:0.95, fontWeight:300}}>
            Honest <span style={{fontStyle:'normal'}}>trend</span><br/>of <span style={{color:'var(--clay)'}}>human</span>.
          </Title>
          <div style={{marginTop:32, maxWidth:380, fontSize:14.5, lineHeight:1.65, color:'var(--ink-3)'}}>
            Densidade trimestral em quatro páginas. Tipografia como ar.
            Cabeçalhos que sustentam um número de cada vez, sem decoração.
          </div>
        </div>

        {/* preview slab — a single KPI rendered as if it were the page itself */}
        <div style={{border:'0.5px solid var(--rule)', borderRadius:2, padding:'40px 36px', background:'var(--surface)'}}>
          <div className="smallcaps">Próxima cobrança · Q3 2026</div>
          <Title size={84} style={{marginTop:18, lineHeight:1}}>
            <span className="tab">3.842,00</span><span style={{fontSize:32,marginLeft:6,color:'var(--ink-3)'}}>€</span>
          </Title>
          <div style={{marginTop:16, display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
            <div className="mono tab" style={{fontSize:11, color:'var(--ink-3)'}}>15 / SET / 2026</div>
            <div className="smallcaps"><span style={{color:'var(--clay)'}}>●</span> extras por confirmar</div>
          </div>
          <Hr style={{marginTop:24, marginBottom:24}} />
          <div style={{display:'flex',gap:32, fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-3)'}}>
            <div><div className="smallcaps">Ciclo</div><div style={{marginTop:6,fontSize:14,color:'var(--ink)'}}>3 / 8</div></div>
            <div><div className="smallcaps">Mês</div><div style={{marginTop:6,fontSize:14,color:'var(--ink)'}}>09 / 24</div></div>
            <div><div className="smallcaps">Cliente</div><div style={{marginTop:6,fontSize:14,color:'var(--ink)'}}>Hotel Sereno</div></div>
          </div>
        </div>
      </div>

      {/* row of moodboard chips */}
      <div style={{marginTop:'auto', display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:24}}>
        <div>
          <div className="smallcaps">Palette</div>
          <div style={{marginTop:10, display:'flex', height:60, borderRadius:2, overflow:'hidden', border:'0.5px solid var(--rule)'}}>
            {['#f2e9d2','#e3d6b3','#a86a3d','#2a1d12'].map(c=>(<div key={c} style={{flex:1, background:c}} />))}
          </div>
        </div>
        <div>
          <div className="smallcaps">Type</div>
          <div style={{marginTop:6, fontFamily:'var(--display)', fontSize:40, fontWeight:300, lineHeight:1}}>Fraunces</div>
          <div style={{fontFamily:'var(--body)', fontSize:12, color:'var(--ink-3)', marginTop:4}}>Manrope · sm body</div>
        </div>
        <div>
          <div className="smallcaps">Vibes</div>
          <div style={{marginTop:8, fontSize:12.5, lineHeight:1.55, color:'var(--ink-3)'}}>Cereal · Kinfolk · Aesop print · whitespace alimenta hierarquia</div>
        </div>
        <div>
          <div className="smallcaps">Densidade</div>
          <div style={{marginTop:8, fontFamily:'var(--display)', fontSize:18, color:'var(--ink-2)', lineHeight:1.3}}>
            <em>baixa</em> &nbsp;na superfície;<br/>tabelas mantêm pulso.
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 02 · Denso · Linear/Stripe
//   Tight grid, command palette evidence, mono ascendant
// ─────────────────────────────────────────────────────────────
function MoodLinear() {
  return (
    <div className="ab" style={{padding:'40px 44px', display:'flex', flexDirection:'column', gap:24}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
        <SectionMark n={2} label="Direção · Denso · operacional" />
        <div className="smallcaps tab">RVDE / Admin CRM</div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'320px 1fr', gap:28, flex:1}}>
        {/* left rail mood */}
        <div style={{display:'flex',flexDirection:'column',gap:18}}>
          <div>
            <Title size={56} style={{lineHeight:0.95}}>
              Atalhos<br/>antes de<br/><span className="clay">cliques</span>.
            </Title>
          </div>
          <div style={{fontSize:13.5, lineHeight:1.55, color:'var(--ink-3)'}}>
            Cmd K, J/K, todas as tabelas com sticky header e bulk-actions.
            Mono em IDs, valores, ciclos.
          </div>

          {/* fake command palette */}
          <div style={{background:'var(--tobacco)', color:'var(--bone)', borderRadius:6, padding:'14px 16px', marginTop:8}}>
            <div style={{display:'flex',alignItems:'center',gap:8, fontFamily:'var(--mono)', fontSize:11.5, opacity:0.6}}>
              <span>⌘K</span><span>·</span><span>Pesquisar tudo</span>
            </div>
            <div style={{height:0.5, background:'rgba(242,233,210,0.18)', margin:'10px -16px'}}/>
            {[
              ['→','Contrato HTL-2026-0142'],
              ['→','Cliente · Hotel Sereno'],
              ['↳','Renovar contrato (60 dias)'],
              ['↳','Marcar cobrança Q3 manual'],
            ].map(([k,v],i)=>(
              <div key={i} style={{display:'flex', gap:12, padding:'6px 0', fontFamily:'var(--mono)', fontSize:12, alignItems:'center', opacity: i===0?1:0.7}}>
                <span style={{opacity:0.5, width:14}}>{k}</span>
                <span>{v}</span>
              </div>
            ))}
          </div>
        </div>

        {/* fake data table */}
        <div style={{background:'var(--surface)', border:'0.5px solid var(--rule)', borderRadius:6, overflow:'hidden'}}>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'12px 16px', borderBottom:'0.5px solid var(--rule)'}}>
            <div style={{display:'flex',gap:10}}>
              <span className="badge"><span className="dot" style={{background:'var(--clay)'}}/>Ativos 47</span>
              <span className="badge ink-2">Pendentes 3</span>
              <span className="badge ink-2">Terminados 12</span>
            </div>
            <div className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>62 contratos · MRR 18.420 €</div>
          </div>
          <table style={{width:'100%', borderCollapse:'collapse', fontSize:12.5, fontFamily:'var(--body)'}}>
            <thead>
              <tr style={{textAlign:'left', color:'var(--ink-3)', fontWeight:500}}>
                {['ID','Cliente','Tipo','Ciclo','Próx. cobrança','Valor','Estado'].map(h=>(
                  <th key={h} style={{padding:'10px 14px', borderBottom:'0.5px solid var(--rule)', fontFamily:'var(--mono)', fontSize:10.5, textTransform:'uppercase', letterSpacing:0.08, fontWeight:500}}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {[
                ['HTL-26-0142','Hotel Sereno · Comporta','Hotel','3 / 8','15.09.26','3 842,00','ativo'],
                ['SPA-26-0091','Spa Salgueiros','Spa','5 / 8','22.09.26','1 280,00','ativo'],
                ['GYM-26-0073','Atlas Athletic','Ginásio','7 / 8','01.10.26','920,00','renovação'],
                ['BRB-26-0058','Barbearia Lapa','Barbearia','2 / 8','03.10.26','620,00','ativo'],
                ['HTL-25-0021','Casa do Mar','Hotel','8 / 8','30.10.26','4 110,00','renovação'],
                ['SPA-26-0044','Termas Calmas','Spa','1 / 8','12.11.26','2 240,00','pendente'],
              ].map((r,i)=>(
                <tr key={i} style={{borderBottom: i<5 ? '0.5px solid var(--rule-2)' : 'none'}}>
                  <td style={{padding:'10px 14px', fontFamily:'var(--mono)', fontSize:11.5, color:'var(--ink-3)'}}>{r[0]}</td>
                  <td style={{padding:'10px 14px'}}>{r[1]}</td>
                  <td style={{padding:'10px 14px', color:'var(--ink-3)'}}>{r[2]}</td>
                  <td style={{padding:'10px 14px', fontFamily:'var(--mono)', fontSize:11.5}}>{r[3]}</td>
                  <td style={{padding:'10px 14px', fontFamily:'var(--mono)', fontSize:11.5}}>{r[4]}</td>
                  <td style={{padding:'10px 14px', fontFamily:'var(--mono)', fontSize:12, textAlign:'right'}}>{r[5]} €</td>
                  <td style={{padding:'10px 14px'}}>
                    <span className="badge" style={{
                      color: r[6]==='ativo' ? 'var(--moss)' : r[6]==='renovação' ? 'var(--clay)' : 'var(--ink-3)',
                    }}><span className="dot"/>{r[6]}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* footer chips */}
      <div style={{display:'flex', gap:36, paddingTop:14, borderTop:'0.5px solid var(--rule)', marginTop:'auto'}}>
        <div>
          <div className="smallcaps">Mono ascendente</div>
          <div className="mono" style={{fontSize:16, marginTop:6}}>HTL-26-0142 · 3 842,00 €</div>
        </div>
        <div>
          <div className="smallcaps">Densidade</div>
          <div style={{fontFamily:'var(--display)', fontSize:18, color:'var(--ink-2)', marginTop:6}}>tabelas justas, ar nas margens</div>
        </div>
        <div style={{marginLeft:'auto'}}>
          <div className="smallcaps">Inspiração</div>
          <div style={{fontSize:13, color:'var(--ink-3)', marginTop:6}}>Linear · Stripe · Qonto · Pennylane</div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 03 · Materialidade · Aesop
//   Paper, warm cards, layered, restrained
// ─────────────────────────────────────────────────────────────
function MoodAesop() {
  return (
    <div className="ab" style={{padding:'48px 56px', display:'flex', flexDirection:'column', gap:28}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
        <SectionMark n={3} label="Direção · Materialidade apothecary" />
        <div className="smallcaps tab">RVDE / Portal cliente</div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1.1fr 0.9fr', gap:40, flex:1}}>
        {/* Layered cards: stacked product cards on warm bone-3 background */}
        <div style={{position:'relative', background:'var(--bone-3)', borderRadius:4, padding:'36px 32px', overflow:'hidden'}}>
          <div className="smallcaps" style={{color:'var(--ink-3)'}}>Base trimestral · Q3</div>
          <Title size={36} style={{marginTop:8, color:'var(--ink-2)'}}>Cedar &amp; Sandalwood</Title>
          <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-3)', marginTop:6}}>OS / 04 · BASE LINE</div>

          {/* product slabs */}
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14, marginTop:36}}>
            {[
              ['Champô','5 L · recarga','bottle'],
              ['Sabonete líq.','5 L · recarga','jar'],
              ['Loção corpo','1 L · refill','tube'],
            ].map(([n,sub,kind],i)=>(
              <div key={i} style={{background:'var(--surface)', borderRadius:4, padding:'16px 14px', border:'0.5px solid var(--rule)', display:'flex', flexDirection:'column', gap:6}}>
                <div style={{height:90, display:'flex', alignItems:'center', justifyContent:'center', background:'var(--bone-3)', borderRadius:2, marginBottom:6}}>
                  <PlaceholderImg kind={kind} w={50} h={80} />
                </div>
                <div style={{fontFamily:'var(--display)', fontSize:16}}>{n}</div>
                <div className="smallcaps">{sub}</div>
              </div>
            ))}
          </div>

          {/* footnote */}
          <div style={{position:'absolute', bottom:24, right:32, fontFamily:'var(--display)', fontStyle:'italic', fontSize:13, color:'var(--ink-3)'}}>
            8 · entregas por contrato
          </div>
        </div>

        {/* right column — type & manifesto */}
        <div style={{display:'flex', flexDirection:'column', gap:24}}>
          <Title size={68} style={{lineHeight:0.96, fontWeight:300}}>
            Calma<br/>
            <em style={{color:'var(--clay)'}}>terrenosa</em>,<br/>
            <span style={{color:'var(--ink-2)'}}>matéria primeira.</span>
          </Title>

          <div style={{fontSize:14, lineHeight:1.65, color:'var(--ink-3)', maxWidth:380}}>
            Superfícies bone empilhadas com borders 0.5pt cor argila. Cantos
            quase nulos (2–4 px). Sombra reservada. Os produtos respiram
            como rótulos de boticário.
          </div>

          {/* alert/note tile */}
          <div style={{background:'var(--tobacco)', color:'var(--bone)', borderRadius:4, padding:'18px 20px', marginTop:'auto'}}>
            <div className="smallcaps" style={{color:'rgba(242,233,210,0.65)'}}>Aviso · ciclo</div>
            <div style={{marginTop:6, fontFamily:'var(--display)', fontSize:22, lineHeight:1.25}}>
              Define extras até <span className="tab" style={{color:'var(--sand)'}}>08 · 09</span>.
            </div>
            <div style={{marginTop:6, fontSize:12.5, opacity:0.75, fontFamily:'var(--mono)'}}>Faltam 11 dias · Q3 2026</div>
          </div>
        </div>
      </div>

      {/* swatch strip */}
      <div style={{display:'flex', gap:12, paddingTop:16, borderTop:'0.5px solid var(--rule)'}}>
        {[
          ['Bone','#f2e9d2'],['Bone 2','#ece1c4'],['Bone 3','#e3d6b3'],
          ['Sand','#c9a661'],['Clay','#a86a3d'],['Moss','#4a4a30'],
          ['Ink','#1f1812'],['Tobacco','#2a1d12'],
        ].map(([n,h])=>(
          <div key={h} style={{flex:1, display:'flex', alignItems:'center', gap:10}}>
            <div style={{width:28,height:28,background:h, border:'0.5px solid rgba(0,0,0,0.08)', borderRadius:2}}/>
            <div className="mono" style={{fontSize:10, color:'var(--ink-3)'}}>{n}<br/>{h.toUpperCase()}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { MoodEditorial, MoodLinear, MoodAesop, MB_W, MB_H });