{
  "id": "logo-concepts",
  "name": "Logo Concepts",
  "category": "creative",
  "tags": ["creative", "logo", "branding", "design"],
  "description": "Display logo concept variations with different color palettes.",
  "triggers": ["logo concepts", "logo ideas", "brand design", "logo"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "function LogoConcepts() {\n  const [active, setActive] = React.useState(0);\n  const concepts = [\n    { name: 'Minimal', fg: '#0f172a', bg: '#f8fafc' },\n    { name: 'Vibrant', fg: '#ffffff', bg: '#2563eb' },\n    { name: 'Warm', fg: '#431407', bg: '#ffedd5' },\n    { name: 'Dark', fg: '#22d3ee', bg: '#0f172a' }\n  ];\n\n  return (\n    <div style={{ fontFamily: 'system-ui, sans-serif', padding: 16, background: '#ffffff', borderRadius: 12, height: '100%', display: 'flex', flexDirection: 'column', color: '#1e293b' }}>\n      <h2 style={{ margin: '0 0 12px', fontSize: 18 }}>Logo Concepts</h2>\n      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 8, background: concepts[active].bg, color: concepts[active].fg, transition: 'all 0.3s' }}>\n        <div style={{ textAlign: 'center' }}>\n          <div style={{ fontSize: 36, fontWeight: 800, letterSpacing: -1 }}>BRAND</div>\n          <div style={{ fontSize: 12, letterSpacing: 3, opacity: 0.8 }}>LOGO CONCEPT</div>\n        </div>\n      </div>\n      <div style={{ display: 'flex', gap: 8, marginTop: 12, justifyContent: 'center' }}>\n        {concepts.map((c, i) => (\n          <button\n            key={i}\n            onClick={() => setActive(i)}\n            style={{\n              padding: '6px 12px',\n              borderRadius: 6,\n              border: '1px solid #e2e8f0',\n              background: active === i ? '#1e293b' : '#fff',\n              color: active === i ? '#fff' : '#1e293b',\n              fontSize: 12,\n              cursor: 'pointer'\n            }}\n          >\n            {c.name}\n          </button>\n        ))}\n      </div>\n    </div>\n  );\n}\nrender(<LogoConcepts/>);",
  "placeholders": [
    { "name": "REPLACE_WITH_BRAND_NAME", "description": "Brand name to display in logo concepts", "default": "BRAND" }
  ]
}