// prumo-logos.jsx — conceitos de logo para o Prumo (marca + wordmark)
// Marcas em geometria simples: fio de prumo, esquadro, nível, "P", crosshair.

const MARKS = {
  // 1 — fio de prumo clássico (linha + peso triangular)
  plumb: (ink,ac)=>(<g>
    <line x1="24" y1="6" x2="24" y2="28" stroke={ink} strokeWidth="3" strokeLinecap="round"/>
    <polygon points="17,28 31,28 24,43" fill={ac}/>
  </g>),
  // 2 — peso em losango (formato real do prumo)
  bobDiamond: (ink,ac)=>(<g>
    <line x1="24" y1="5" x2="24" y2="18" stroke={ink} strokeWidth="3" strokeLinecap="round"/>
    <polygon points="24,18 32,29 24,45 16,29" fill={ac}/>
    <line x1="16" y1="29" x2="32" y2="29" stroke={ink} strokeWidth="1.5" opacity=".35"/>
  </g>),
  // 3 — letra P com fio de prumo no pé
  pPlumb: (ink,ac)=>(<g fill="none">
    <path d="M16 8 V39" stroke={ink} strokeWidth="3.4" strokeLinecap="round"/>
    <path d="M16 9.5 H27 a8.4 8.4 0 0 1 0 16.8 H16" stroke={ink} strokeWidth="3.4" strokeLinecap="round"/>
    <polygon points="12.6,39 19.4,39 16,45" fill={ac}/>
  </g>),
  // 4 — esquadro (right angle / precisão)
  square: (ink,ac)=>(<g fill="none">
    <polygon points="13,38 24,38 13,27" fill={ac} opacity=".9"/>
    <path d="M13 6 V38 H41" stroke={ink} strokeWidth="4.4" strokeLinecap="round" strokeLinejoin="round"/>
  </g>),
  // 5 — nível de bolha
  level: (ink,ac)=>(<g fill="none">
    <rect x="5" y="18.5" width="38" height="11" rx="5.5" stroke={ink} strokeWidth="2.6"/>
    <line x1="19" y1="20.5" x2="19" y2="27.5" stroke={ink} strokeWidth="1.8"/>
    <line x1="29" y1="20.5" x2="29" y2="27.5" stroke={ink} strokeWidth="1.8"/>
    <circle cx="24" cy="24" r="3.4" fill={ac}/>
  </g>),
  // 6 — monograma P em quadrado arredondado
  mono: (ink,ac)=>(<g fill="none">
    <rect x="5" y="5" width="38" height="38" rx="11" stroke={ac} strokeWidth="2.6"/>
    <path d="M19 15 V33" stroke={ink} strokeWidth="3" strokeLinecap="round"/>
    <path d="M19 16 H26 a6 6 0 0 1 0 12 H19" stroke={ink} strokeWidth="3" strokeLinecap="round"/>
  </g>),
  // 7 — crosshair (alinhamento / mira de precisão)
  cross: (ink,ac)=>(<g fill="none">
    <circle cx="24" cy="24" r="12.5" stroke={ink} strokeWidth="2.6"/>
    <line x1="24" y1="3" x2="24" y2="11" stroke={ink} strokeWidth="2.6" strokeLinecap="round"/>
    <line x1="24" y1="37" x2="24" y2="45" stroke={ink} strokeWidth="2.6" strokeLinecap="round"/>
    <line x1="3" y1="24" x2="11" y2="24" stroke={ink} strokeWidth="2.6" strokeLinecap="round"/>
    <line x1="37" y1="24" x2="45" y2="24" stroke={ink} strokeWidth="2.6" strokeLinecap="round"/>
    <circle cx="24" cy="24" r="3.2" fill={ac}/>
  </g>),
  // 8 — minimalista (linha + ponto)
  minimal: (ink,ac)=>(<g>
    <line x1="24" y1="6" x2="24" y2="36" stroke={ink} strokeWidth="2.6" strokeLinecap="round"/>
    <circle cx="24" cy="41" r="3.4" fill={ac}/>
  </g>),
  // 9 — prumo + base (alinhado ao chão)
  baseline: (ink,ac)=>(<g>
    <line x1="24" y1="5" x2="24" y2="21" stroke={ink} strokeWidth="2.6" strokeLinecap="round"/>
    <polygon points="18,21 30,21 24,34" fill={ac}/>
    <line x1="24" y1="35" x2="24" y2="41" stroke={ink} strokeWidth="1.6" strokeDasharray="2 2.5"/>
    <line x1="11" y1="42.5" x2="37" y2="42.5" stroke={ink} strokeWidth="2.6" strokeLinecap="round"/>
  </g>),
};

const META = {
  plumb:['Fio de prumo','linha + peso — o instrumento'],
  bobDiamond:['Peso em losango','o prumo estilizado'],
  pPlumb:['“P” prumo','a letra vira o fio'],
  square:['Esquadro','ângulo reto · precisão'],
  level:['Nível de bolha','equilíbrio · exatidão'],
  mono:['Monograma','“P” em selo'],
  cross:['Mira','alinhamento'],
  minimal:['Mínimo','linha + ponto'],
  baseline:['No prumo','alinhado à base'],
};

function Mark({name, size=46, ink='#e8dfc5', accent='#e0a14e'}){
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" style={{display:'block',flexShrink:0}}>
      {MARKS[name](ink,accent)}
    </svg>
  );
}

// Wordmark = Poppins (Medium por padrão, igual à logo real); mono usa Nippo.
function Wordmark({text='Prumo', weight=500, spacing='-.01em', transform='none', mono=false, size=30, color='#e8dfc5'}){
  return (
    <span style={{fontFamily:mono?"'Nippo',monospace":"'Poppins',sans-serif",
      fontWeight:weight, letterSpacing:spacing, textTransform:transform, fontSize:size, color, lineHeight:1}}>{text}</span>
  );
}

// lockup: marca + nome (horizontal)
function Lockup({name, ink='#e8dfc5', accent='#e0a14e', size=46, gap=14, wm={}}){
  return (
    <span style={{display:'inline-flex',alignItems:'center',gap}}>
      <Mark name={name} size={size} ink={ink} accent={accent}/>
      <Wordmark color={ink} size={size*0.62} {...wm}/>
    </span>
  );
}

// ícone de app (tile arredondado)
function AppIcon({name, bg='#16140f', ink='#e8dfc5', accent='#e0a14e', s=88}){
  return (
    <div style={{width:s,height:s,borderRadius:s*0.235,background:bg,display:'grid',placeItems:'center',
      border:'1px solid rgba(255,255,255,.08)',boxShadow:'0 10px 30px -16px rgba(0,0,0,.8)'}}>
      <Mark name={name} size={s*0.56} ink={ink} accent={accent}/>
    </div>
  );
}

Object.assign(window,{ MARKS, META, Mark, Wordmark, Lockup, AppIcon });
