/* Prolastro site — shared atoms */
const BRAND = {
  600: "#2C4BB8", 500: "#3D5DD0", 400: "#5A79DD", 300: "#7A93E5",
  ink950:"#0E1118", ink900:"#191E29", ink700:"#4A5066", ink500:"#7A8094", ink300:"#BEC3D2", ink200:"#D9DCE5", ink100:"#EDEFF4",
  paper:"#FBFAF7", paper2:"#F3F2EC",
};

function Mark({ size=32, color=BRAND[600], opacities=[1, 0.72, 0.44] }) {
  return <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-label="Prolastro">
    <rect x="4" y="32" width="40" height="10" rx="1.5" fill={color} opacity={opacities[0]}/>
    <rect x="8" y="20" width="32" height="10" rx="1.5" fill={color} opacity={opacities[1]}/>
    <rect x="12" y="8" width="24" height="10" rx="1.5" fill={color} opacity={opacities[2]}/>
  </svg>;
}

function Wordmark({ size=22, color=BRAND.ink900 }) {
  return <span style={{ fontFamily:"'Inter',sans-serif", fontSize:size, fontWeight:500, letterSpacing:"-0.03em", color, lineHeight:1, whiteSpace:"nowrap", display:"inline-block" }}>
    <span style={{fontWeight:400, opacity:0.72}}>pro</span><span>lastro</span>
  </span>;
}

function Lockup({ size=28, color=BRAND.ink900, symbolColor=BRAND[600] }) {
  return <div style={{display:"inline-flex", alignItems:"center", gap:size*0.34}}>
    <Mark size={size} color={symbolColor}/>
    <Wordmark size={size*0.72} color={color}/>
  </div>;
}

function Mono({children, muted=false, color}) {
  return <span style={{ fontFamily:"'JetBrains Mono',ui-monospace,monospace", fontSize:11.5, letterSpacing:"0.02em", color:color||(muted?BRAND.ink500:"inherit") }}>{children}</span>;
}

function Eyebrow({children, color=BRAND[600]}) {
  return <div style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:11, letterSpacing:"0.18em", textTransform:"uppercase", color, display:"flex", alignItems:"center", gap:14, marginBottom:20 }}>
    <span style={{width:28, height:1, background:color}}/>{children}
  </div>;
}

function Button({children, href="#", kind="primary", size="md", onClick}) {
  const sizes = { sm:{padding:"8px 14px", fontSize:13, gap:6}, md:{padding:"12px 20px", fontSize:14, gap:8}, lg:{padding:"16px 24px", fontSize:15, gap:10} };
  const kinds = {
    primary:{ background:BRAND[600], color:"white", border:`1px solid ${BRAND[600]}` },
    ghost:{ background:"transparent", color:BRAND.ink900, border:"1px solid transparent" },
    outline:{ background:"transparent", color:BRAND.ink900, border:`1px solid ${BRAND.ink200}` },
    dark:{ background:BRAND.ink950, color:"white", border:`1px solid ${BRAND.ink950}` },
    negative:{ background:"white", color:BRAND.ink900, border:"1px solid white" },
  };
  return <a href={href} onClick={onClick} style={{
    ...sizes[size], ...kinds[kind],
    display:"inline-flex", alignItems:"center", justifyContent:"center",
    fontFamily:"'Inter',sans-serif", fontWeight:500, textDecoration:"none",
    borderRadius:8, transition:"all 120ms cubic-bezier(0.2,0,0,1)",
    cursor:"pointer", whiteSpace:"nowrap",
  }}>{children}</a>;
}

function Grid({children, bg, dense=false}) {
  return <div style={{ backgroundImage:`linear-gradient(${BRAND.ink200} 1px, transparent 1px), linear-gradient(90deg, ${BRAND.ink200} 1px, transparent 1px)`, backgroundSize: dense?"40px 40px":"80px 80px", backgroundColor:bg||BRAND.paper, opacity:1 }}>{children}</div>;
}

Object.assign(window, { BRAND, Mark, Wordmark, Lockup, Mono, Eyebrow, Button, Grid });