{% if product.tags contains 'custom' or product.tags contains 'customize' %}
<link rel="stylesheet" href="{{ 'personalizer-widget.css' | asset_url }}">

<div
  id="co-personalizer"
  class="co-personalizer"
  data-app-url="https://app.creativeoasis.ca"
  data-product-handle="{{ product.handle }}"
  data-product-title="{{ product.title | escape }}"
  data-product-tags="{{ product.tags | join: ',' | escape }}"
  data-variant-id="{{ product.selected_or_first_available_variant.id }}"
>
  <div class="co-card co-pro-card">
    <div class="co-hero">
      <div>
        <p class="co-eyebrow">Creative Oasis Studio</p>
        <h3>Laser & CNC Customization Studio</h3>
        <p class="muted">Build a production-ready request with wood selection, machining method, engraving style, and customer approval.</p>
      </div>
      <div class="co-badges">
        <span class="co-chip">Live Preview</span>
        <span class="co-chip">Saved to Admin Queue</span>
        <span class="co-chip">Proof Workflow</span>
      </div>
    </div>

    <div class="co-grid-2">
      <div>
        <div class="co-field">
          <label for="co_operation_choice">Operation</label>
          <select id="co_operation_choice">
            <option value="Text Personalization">Text Personalization</option>
            <option value="Name Sign">Name Sign</option>
            <option value="Logo Engraving">Logo Engraving</option>
            <option value="Wall Art Panel">Wall Art Panel</option>
            <option value="Inlay Piece">Inlay Piece</option>
            <option value="Cut File Project">Cut File Project</option>
          </select>
        </div>

        <div class="co-field">
          <label for="co_method_choice">Machine Method</label>
          <select id="co_method_choice">
            <option value="Laser Engrave">Laser Engrave</option>
            <option value="Laser Cut">Laser Cut</option>
            <option value="CNC V-Carve">CNC V-Carve</option>
            <option value="CNC Pocket Carve">CNC Pocket Carve</option>
            <option value="CNC Profile Cut">CNC Profile Cut</option>
            <option value="Inlay">Inlay</option>
          </select>
        </div>

        <div class="co-field">
          <label for="co_custom_text">Custom text</label>
          <input id="co_custom_text" type="text" maxlength="80" placeholder="Enter your text">
        </div>

        <div class="co-field">
          <label for="co_font_choice">Font choice</label>
          <select id="co_font_choice">
            <option value="Script">Script</option>
            <option value="Modern">Modern</option>
            <option value="Serif">Serif</option>
            <option value="Sans">Sans</option>
            <option value="Elegant Serif">Elegant Serif</option>
            <option value="Classic Roman">Classic Roman</option>
            <option value="Minimal Sans">Minimal Sans</option>
            <option value="Bold Block">Bold Block</option>
            <option value="Handwritten">Handwritten</option>
            <option value="Signature">Signature</option>
            <option value="Monogram">Monogram</option>
            <option value="Stencil">Stencil</option>
            <option value="Rustic Serif">Rustic Serif</option>
            <option value="Clean Engrave">Clean Engrave</option>
            <option value="Heritage Script">Heritage Script</option>
            <option value="Workshop Sans">Workshop Sans</option>
          </select>
        </div>

        <div class="co-field">
          <label for="co_wood_species">Wood species</label>
          <select id="co_wood_species">
            <option value="Maple">Maple</option>
            <option value="Walnut">Walnut</option>
            <option value="Cherry">Cherry</option>
            <option value="Oak">Oak</option>
            <option value="Birch">Birch</option>
            <option value="Baltic Birch Plywood">Baltic Birch Plywood</option>
            <option value="Alder">Alder</option>
            <option value="Ash">Ash</option>
            <option value="Cedar">Cedar</option>
            <option value="Mahogany">Mahogany</option>
          </select>
        </div>
      </div>

      <div>
        <div class="co-field">
          <label for="co_finish_choice">Finish</label>
          <select id="co_finish_choice">
            <option value="Natural">Natural</option>
            <option value="Clear Coat">Clear Coat</option>
            <option value="Matte Oil">Matte Oil</option>
            <option value="Satin Poly">Satin Poly</option>
            <option value="Dark Stain">Dark Stain</option>
            <option value="Black Wash">Black Wash</option>
          </select>
        </div>

        <div class="co-field">
          <label for="co_color_choice">Accent / fill color</label>
          <select id="co_color_choice">
            <option value="None">None</option>
            <option value="Black">Black</option>
            <option value="White">White</option>
            <option value="Gold">Gold</option>
            <option value="Silver">Silver</option>
            <option value="Brass">Brass</option>
            <option value="Walnut Inlay">Walnut Inlay</option>
            <option value="Maple Inlay">Maple Inlay</option>
          </select>
        </div>

        <div class="co-field">
          <label for="co_size_choice">Project size</label>
          <select id="co_size_choice">
            <option value="Small">Small</option>
            <option value="Medium" selected>Medium</option>
            <option value="Large">Large</option>
            <option value="Oversized">Oversized</option>
          </select>
        </div>

        <div class="co-field">
          <label for="co_notes">Design notes</label>
          <textarea id="co_notes" rows="4" placeholder="Optional notes for customization, machining depth, edge detail, artwork placement, or finishing instructions"></textarea>
        </div>

        <div class="co-field">
          <label for="co_customer_image">Upload artwork / logo reference</label>
          <input id="co_customer_image" type="file" accept="image/*">
        </div>
      </div>
    </div>

    <div class="co-preview-wrap">
      <div class="co-preview-title">Live preview</div>
      <div class="co-preview co-preview-pro" id="co_preview">
        <img id="co_preview_image" alt="" style="display:none;">
        <div id="co_preview_text" class="co-preview-text">Your text preview</div>
        <div class="co-preview-meta">
          <div id="co_preview_method" class="muted">Method: Laser Engrave</div>
          <div id="co_preview_material" class="muted">Wood: Maple</div>
          <div id="co_preview_finish" class="muted">Finish: Natural</div>
          <div id="co_preview_color" class="muted">Accent: None</div>
        </div>
      </div>
    </div>

    <div class="co-field co-approval">
      <label>
        <input id="co_approval_checked" type="checkbox">
        I approve this design request and understand production starts from the submitted customization once the proof is confirmed.
      </label>
    </div>

    <div class="co-actions">
      <button type="button" id="co_save_customization">Save customization</button>
      <span id="co_status_message" class="co-status"></span>
    </div>
  </div>
</div>

<script src="{{ 'personalizer-widget.js' | asset_url }}" defer></script>
{% endif %}