// DIRECTION 05 · QUIET ATELIER
// Minimal — off-white, refined sans, purple as small but impactful accent.

function D05_Manifesto() {
  return (
    <div style={{ height: '100%', background: '#faf8f3', padding: ABPAD + 4, display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <YoubeLockup height={11} color="ink" />
        <span className="label-caps" style={{ fontSize: 8 }}>—  05 / ATELIER</span>
      </div>

      <div style={{ marginTop: 'auto', marginBottom: 'auto' }}>
        <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--purple)', marginBottom: 12 }}/>
        <div style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 300, fontSize: 22, lineHeight: 1.1, color: 'var(--ink)', letterSpacing: '-0.015em' }}>
          Um lugar<br/>silencioso<br/>para o seu<br/><span style={{ fontWeight: 600 }}>cuidado.</span>
        </div>
        <p style={{ fontFamily: "'Plus Jakarta Sans'", fontSize: 10, fontWeight: 400, lineHeight: 1.5, color: 'var(--ink-faint)', marginTop: 14, marginBottom: 0, maxWidth: '90%' }}>
          Espaço, pausa e respiro. A Yoube como atelier de quem trabalha com beleza.
        </p>
      </div>

      <div style={{ borderTop: '1px solid var(--pencil-light)', paddingTop: 10 }}>
        <div style={{ display: 'flex', gap: 16, alignItems: 'flex-end', marginBottom: 14 }}>
          <div>
            <div style={{ width: 14, height: 14, background: 'var(--purple)' }}/>
            <div className="label-caps" style={{ fontSize: 7, marginTop: 4 }}>Iris</div>
          </div>
          <div>
            <div style={{ width: 14, height: 14, background: '#1c1b22' }}/>
            <div className="label-caps" style={{ fontSize: 7, marginTop: 4 }}>Onyx</div>
          </div>
          <div>
            <div style={{ width: 14, height: 14, background: '#faf8f3', border: '1px solid var(--pencil-light)' }}/>
            <div className="label-caps" style={{ fontSize: 7, marginTop: 4 }}>Linen</div>
          </div>
          <div>
            <div style={{ width: 14, height: 14, background: '#e9e3d5' }}/>
            <div className="label-caps" style={{ fontSize: 7, marginTop: 4 }}>Sand</div>
          </div>
        </div>
        <div className="label-caps" style={{ fontSize: 8 }}>Tipo · Plus Jakarta Sans 300 / 600</div>
      </div>
    </div>
  );
}

function D05_Landing() {
  return (
    <div style={{ height: '100%', background: '#faf8f3', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 22px' }}>
        <YoubeLockup height={11} color="ink" />
        <div style={{ display: 'flex', gap: 18, fontFamily: "'Plus Jakarta Sans'", fontSize: 9, fontWeight: 400, color: 'var(--ink-faint)' }}>
          <span>Atelier</span><span>Diário</span><span>Plataforma</span><span>Entrar</span>
        </div>
      </div>

      <div style={{ padding: '0 22px', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 28, flex: 1, alignItems: 'center' }}>
        <div>
          <div style={{ width: 12, height: 12, borderRadius: '50%', background: 'var(--purple)', marginBottom: 14 }}/>
          <span className="label-caps" style={{ fontSize: 8 }}>—  PLATAFORMA DE BELEZA</span>
          <div style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 300, fontSize: 34, lineHeight: 1.0, color: 'var(--ink)', letterSpacing: '-0.025em', marginTop: 10 }}>
            Silêncio,<br/>método<br/>e <span style={{ fontWeight: 600 }}>simplicidade.</span>
          </div>
          <p style={{ fontFamily: "'Plus Jakarta Sans'", fontSize: 11, lineHeight: 1.55, color: 'var(--ink-faint)', marginTop: 14, marginBottom: 0, maxWidth: 220 }}>
            Sua agenda, sua operação, no ritmo do seu ofício.
          </p>
          <div style={{ marginTop: 18, display: 'flex', gap: 14, alignItems: 'center' }}>
            <div style={{ fontFamily: "'Plus Jakarta Sans'", fontSize: 10, fontWeight: 600, color: 'var(--ink)', borderBottom: '1.5px solid var(--purple)', paddingBottom: 2 }}>Começar →</div>
            <div style={{ fontFamily: "'Plus Jakarta Sans'", fontSize: 10, fontWeight: 400, color: 'var(--ink-faint)' }}>Demonstração</div>
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <div style={{ aspectRatio: '3/4', background: '#e9e3d5', borderRadius: 0, position: 'relative', overflow: 'hidden' }}>
            <PHBlock style={{ position: 'absolute', inset: 0, background: '#e9e3d5' }}>still life · objetos calmos</PHBlock>
            <div style={{ position: 'absolute', top: 10, left: 10, width: 8, height: 8, borderRadius: '50%', background: 'var(--purple)' }}/>
          </div>
        </div>
      </div>
    </div>
  );
}

function D05_Social() {
  return (
    <div style={{ height: '100%', background: '#faf8f3', position: 'relative', padding: 18, display: 'flex', flexDirection: 'column' }}>
      <YoubeLockup height={10} color="ink" />

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start' }}>
        <div style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--purple)', marginBottom: 14 }}/>
        <div style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 300, fontSize: 22, lineHeight: 1.05, color: 'var(--ink)', letterSpacing: '-0.025em' }}>
          Menos<br/>retrabalho.<br/><span style={{ fontWeight: 600 }}>Mais ofício.</span>
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', borderTop: '1px solid var(--pencil-light)', paddingTop: 8 }}>
        <span className="label-caps" style={{ fontSize: 8 }}>YOUBE · ATELIER</span>
        <span className="label-caps" style={{ fontSize: 8, color: 'var(--purple-deep)' }}>Nº 05 · Nov</span>
      </div>
    </div>
  );
}

function D05_BizCard() {
  return (
    <div style={{ height: '100%', background: '#faf8f3', position: 'relative', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 18 }}>
      <div className="tape"/>
      <div>
        <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--purple)', marginBottom: 10 }}/>
        <span style={{ fontFamily: "'Plus Jakarta Sans'", fontWeight: 600, fontSize: 18, color: 'var(--ink)', letterSpacing: '-0.02em' }}>Yoube</span>
      </div>

      <div style={{ fontFamily: "'Plus Jakarta Sans'", fontSize: 9, color: 'var(--ink-faint)', lineHeight: 1.5 }}>
        <div style={{ color: 'var(--ink)', fontWeight: 600 }}>Camila Reis</div>
        <div>Atelier de sobrancelhas</div>
        <div style={{ marginTop: 6 }}>camila@yoube.com.br</div>
        <div>· · ·</div>
      </div>

      <Note style={{ position: 'absolute', right: -32, top: 14, transform: 'rotate(4deg)', maxWidth: 90 }}>
        ponto<br/>roxo = ↑<br/>única cor
      </Note>
    </div>
  );
}

function Direction05() {
  return (
    <>
      <DCArtboard id="d5-manifesto" label="Manifesto · atelier" width={300} height={420}><D05_Manifesto /></DCArtboard>
      <DCArtboard id="d5-landing"   label="Landing · silêncio"  width={500} height={360}><D05_Landing /></DCArtboard>
      <DCArtboard id="d5-social"    label="Post · ofício"       width={280} height={280}><D05_Social /></DCArtboard>
      <DCArtboard id="d5-card"      label="Papelaria · cartão"  width={280} height={170}><D05_BizCard /></DCArtboard>
    </>
  );
}

window.Direction05 = Direction05;