<?xml version="1.0" encoding="UTF-8"?>
<template name="Product" category="Commerce" description="Showcase a product with a price and call to action." anim="slide" from="right" animMs="500">
  <field id="name" label="Product" default="StreamStudio Pro"/>
  <field id="desc" label="Description" default="Unlimited destinations &amp; cloud backup"/>
  <field id="price" label="Price" default="$12/mo"/>
  <field id="cta" label="Call to action" default="link in bio"/>
  <field id="accent" label="Accent start" type="color" default="#0ea5e9"/>
  <field id="accent2" label="Accent end" type="color" default="#22c55e"/>

  <rect x="1360" y="760" w="460" h="200" radius="18" fill="rgba(12,15,20,0.94)" stroke="rgba(255,255,255,0.1)" strokeWidth="1.5"/>
  <rect x="1360" y="760" w="460" h="8" radius="4" fill="linear(90,{accent},{accent2})"/>
  <text id="name" x="1390" y="796" size="34" weight="800" color="#ffffff" maxWidth="400">{name}</text>
  <text id="desc" x="1390" y="840" w="400" size="22" weight="500" color="rgba(255,255,255,0.72)" maxWidth="400" if="desc">{desc}</text>
  <rect x="1390" y="896" h="48" radius="10" fill="linear(90,{accent},{accent2})" fit="price" pad="24" min="120"/>
  <text id="price" x="1414" y="896" h="48" valign="middle" size="28" weight="900" color="#0b0d10">{price}</text>
  <text id="cta" x="1800" y="920" align="right" valign="middle" size="22" weight="700" color="{accent}" uppercase="true" letterSpacing="1" if="cta">{cta}</text>
</template>
