/* app.jsx — Compose Design System canvas with palette tweak. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

function CoverArtboard() {
  return (
    <div className="ab" style={{padding:'72px 80px', display:'flex', flexDirection:'column', justifyContent:'space-between'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
        <div>
          <div style={{fontFamily:'var(--display)', fontSize:34, fontWeight:300, letterSpacing:-0.02, lineHeight:1}}>RVDE</div>
          <div className="smallcaps" style={{marginTop:8}}>honest trend of human</div>
        </div>
        <div style={{textAlign:'right'}}>
          <div className="smallcaps">Documento</div>
          <div className="mono tab" style={{fontSize:13, marginTop:2}}>DS · 2026 · 01</div>
          <div className="mono" style={{fontSize:10, color:'var(--ink-3)', marginTop:2}}>v1.0 · maio 2026</div>
        </div>
      </div>

      <div>
        <div className="smallcaps">Sistema de design · entrega 01</div>
        <Title size={104} style={{marginTop:14, fontWeight:300, lineHeight:1.05, paddingBottom:8}}>
          Área <span style={{fontStyle:'italic', color:'var(--clay)'}}>Profissional</span>.<br/>
          Linguagem visual <span style={{fontStyle:'italic'}}>base</span>.
        </Title>
        <div style={{marginTop:36, maxWidth:680, fontSize:15, lineHeight:1.65, color:'var(--ink-2)'}}>
          Três direções visuais, paleta, tipografia, componentes base, badges
          de estado, timeline de 8 trimestres e template PDF do contrato.
          Tudo pensado para hotéis, spas, ginásios e barbearias — e para o
          dia‑a‑dia de quem opera a RVDE por dentro.
        </div>
      </div>

      <div style={{display:'flex', gap:48, paddingTop:24, borderTop:'0.5px solid var(--rule)'}}>
        <div>
          <div className="smallcaps">Esta entrega cobre</div>
          <ul style={{margin:'10px 0 0', padding:0, listStyle:'none', fontFamily:'var(--mono)', fontSize:11.5, lineHeight:2, color:'var(--ink-2)'}}>
            <li><span style={{color:'var(--clay)'}}>§</span> 01 · 3 direções visuais</li>
            <li><span style={{color:'var(--clay)'}}>§</span> 02 · Paleta · 16 tons</li>
            <li><span style={{color:'var(--clay)'}}>§</span> 03 · Tipografia · 2 combinações</li>
            <li><span style={{color:'var(--clay)'}}>§</span> 04 · Componentes base</li>
            <li><span style={{color:'var(--clay)'}}>§</span> 05 · Badges · 7 + 8 estados</li>
            <li><span style={{color:'var(--clay)'}}>§</span> 06 · Timeline 8 trimestres</li>
            <li><span style={{color:'var(--clay)'}}>§</span> 07 · Cartões de produto</li>
            <li><span style={{color:'var(--clay)'}}>§</span> 08 · PDF contrato A4</li>
          </ul>
        </div>
        <div>
          <div className="smallcaps">Próximas iterações</div>
          <ul style={{margin:'10px 0 0', padding:0, listStyle:'none', fontFamily:'var(--mono)', fontSize:11.5, lineHeight:2, color:'var(--ink-3)'}}>
            <li>→ Portal cliente · dashboard / contrato / extras</li>
            <li>→ CRM admin · dashboard / lista / ciclo Q</li>
            <li>→ Mobile portal cliente</li>
            <li>→ Templates de email transacional</li>
          </ul>
        </div>
        <div style={{marginLeft:'auto', alignSelf:'flex-end', textAlign:'right'}}>
          <div className="smallcaps">Tweaks</div>
          <div style={{fontFamily:'var(--display)', fontSize:15, fontStyle:'italic', color:'var(--ink-3)', marginTop:6, maxWidth:200, lineHeight:1.35}}>
            Liga os Tweaks na barra superior para alternar paleta — bone, mid e tobacco.
          </div>
        </div>
      </div>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(()=>{
    document.documentElement.setAttribute('data-theme', t.theme);
  }, [t.theme]);

  return (
    <>
      <DesignCanvas minScale={0.1} maxScale={3}>
        <DCSection id="cover" title="Sistema de Design" subtitle="RVDE · Área Profissional · entrega 01">
          <DCArtboard id="cover" label="Capa · documento" width={1280} height={860}>
            <CoverArtboard />
          </DCArtboard>
        </DCSection>

        <DCSection id="moodboards" title="Direções visuais" subtitle="Três propostas — escolher uma, ou amalgamar pedaços">
          <DCArtboard id="editorial" label="01 · Editorial calma" width={MB_W} height={MB_H}>
            <MoodEditorial />
          </DCArtboard>
          <DCArtboard id="linear" label="02 · Denso · operacional" width={MB_W} height={MB_H}>
            <MoodLinear />
          </DCArtboard>
          <DCArtboard id="aesop" label="03 · Materialidade apothecary" width={MB_W} height={MB_H}>
            <MoodAesop />
          </DCArtboard>
        </DCSection>

        <DCSection id="palette" title="Paleta" subtitle="Bone domina · tobacco em blocos pontuais · clay como matéria">
          <DCArtboard id="colors" label="Paleta completa" width={1280} height={860}>
            <PaletteCard />
          </DCArtboard>
        </DCSection>

        <DCSection id="type" title="Tipografia" subtitle="Fraunces + um sans · JetBrains Mono em valores e IDs">
          <DCArtboard id="manrope" label="A · Fraunces + Manrope" width={1280} height={1000}>
            <TypePairing bodyFamily="Manrope" bodyCss="'Manrope', sans-serif" kicker="A · Manrope" n={5} />
          </DCArtboard>
          <DCArtboard id="intertight" label="B · Fraunces + Inter Tight" width={1280} height={1000}>
            <TypePairing bodyFamily="Inter Tight" bodyCss="'Inter Tight', sans-serif" kicker="B · Inter Tight" n={5} />
          </DCArtboard>
        </DCSection>

        <DCSection id="components" title="Componentes base" subtitle="Buttons, inputs, cards, tabs, tabela, alertas">
          <DCArtboard id="primitives" label="Primitivos · buttons / inputs / cards / alerts" width={1280} height={920}>
            <ComponentsCard />
          </DCArtboard>
          <DCArtboard id="navtables" label="Navegação · tabela densa" width={1280} height={760}>
            <NavTablesCard />
          </DCArtboard>
        </DCSection>

        <DCSection id="badges" title="Badges de estado" subtitle="7 estados de contrato + 8 estados de ciclo">
          <DCArtboard id="states" label="Estados · contrato + ciclo" width={1280} height={860}>
            <StatesCard />
          </DCArtboard>
        </DCSection>

        <DCSection id="timeline" title="Timeline trimestral" subtitle="Peça-chave — 8 nós, 24 meses, vários estados">
          <DCArtboard id="timeline" label="Timeline 8 trimestres" width={1280} height={1080}>
            <TimelineCard />
          </DCArtboard>
        </DCSection>

        <DCSection id="products" title="Cartões de produto" subtitle="Thumbnail line-art + nome + formato + código">
          <DCArtboard id="grid" label="Grelha · CRM produtos" width={1280} height={760}>
            <ProductsCard />
          </DCArtboard>
        </DCSection>

        <DCSection id="pdf" title="PDF do contrato" subtitle="A4 — coerente com a interface, papel quente, mesma tipografia">
          <DCArtboard id="p1" label="Página 1 · sumário + linha base" width={794} height={1123}>
            <PDFPage1 />
          </DCArtboard>
          <DCArtboard id="p2" label="Página 2 · cláusulas + assinaturas" width={794} height={1123}>
            <PDFPage2 />
          </DCArtboard>
        </DCSection>
      </DesignCanvas>

      <TweaksPanel title="Tweaks · RVDE">
        <TweakSection label="Tema" />
        <TweakRadio
          label="Modo"
          value={t.theme}
          options={[
            {value:'light', label:'Claro'},
            {value:'dark',  label:'Escuro'},
          ]}
          onChange={(v) => setTweak('theme', v)}
        />
        <div style={{marginTop:6, fontSize:11, lineHeight:1.5, color:'rgba(41,38,27,.55)'}}>
          <strong style={{color:'rgba(41,38,27,.75)'}}>Claro</strong> · bone sobre papel quente — portal cliente e PDF.<br/>
          <strong style={{color:'rgba(41,38,27,.75)'}}>Escuro</strong> · tobacco e sand sobre warm dark — modo opcional para o admin a operar de noite.
        </div>
      </TweaksPanel>
    </>
  );
}

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