/* spec-settings.jsx — settings_schema.json structure + Liquid stubs */

const JsonBlock = ({ children }) => (
  <pre style={{
    background:'#0f1117', color:'#e8e6e1', padding:S[5],
    fontSize:11, lineHeight:1.75, overflow:'auto', margin:0,
    fontFamily:"'JetBrains Mono', monospace", letterSpacing:'.04em',
    border:`1px solid ${T.ink}`,
  }}>
    <code>{children}</code>
  </pre>
);

const LiquidStub = ({ title, children }) => (
  <div style={{ marginBottom:S[5] }}>
    <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:T.neon, marginBottom:S[2] }}>{title}</div>
    <pre style={{
      background:T.ink, color:'#cfcdc8', padding:S[5],
      fontSize:11, lineHeight:1.75, overflow:'auto', margin:0,
      fontFamily:"'JetBrains Mono', monospace",
      border:`1px solid ${T.ink}`,
    }}>
      <code>{children}</code>
    </pre>
  </div>
);

const GlobalSettingsSchema = () => (
  <Sub no="4.1" title="settings_schema.json — global">
    <JsonBlock>{`[
  {
    "name": "Colors",
    "settings": [
      {
        "type": "color",
        "id": "color_ink",
        "label": "Ink (primary text)",
        "default": "#0a0a0a"
      },
      {
        "type": "color",
        "id": "color_bone",
        "label": "Bone (primary background)",
        "default": "#f5f3ee"
      },
      {
        "type": "color",
        "id": "color_neon",
        "label": "Neon (accent — CTA hover, live dot)",
        "default": "#ff2ec4"
      },
      {
        "type": "color",
        "id": "color_yellow",
        "label": "Yellow (sale badge, highlight tape)",
        "default": "#eaff00"
      },
      {
        "type": "color",
        "id": "color_chrome",
        "label": "Chrome (neutral mid)",
        "default": "#cfcdc8"
      }
    ]
  },
  {
    "name": "Typography",
    "settings": [
      {
        "type": "select",
        "id": "type_direction",
        "label": "Type direction",
        "options": [
          { "value": "A", "label": "A — All Helvetica (safe, brand-pure)" },
          { "value": "B", "label": "B — Helvetica + Fraunces (luxe twist)" },
          { "value": "C", "label": "C — Helvetica + Mono accents (editorial)" }
        ],
        "default": "C",
        "info": "Direction C is the approved brand direction (F1B locked)"
      },
      {
        "type": "font_picker",
        "id": "font_display",
        "label": "Display font (Direction B only)",
        "default": "fraunces_n7"
      }
    ]
  },
  {
    "name": "Layout",
    "settings": [
      {
        "type": "range",
        "id": "page_width",
        "label": "Max page width (px)",
        "min": 1200,
        "max": 1600,
        "step": 40,
        "default": 1440
      },
      {
        "type": "range",
        "id": "gutter",
        "label": "Page gutter (px)",
        "min": 16,
        "max": 64,
        "step": 4,
        "default": 48
      }
    ]
  },
  {
    "name": "Favicon"
  }
]`}</JsonBlock>
    <DevNote>↳ Color settings feed directly into :root CSS custom properties via theme.liquid snippet</DevNote>
  </Sub>
);

const CSSVarsSnippet = () => (
  <Sub no="4.2" title="theme.liquid → CSS custom properties">
    <LiquidStub title="In &lt;head&gt; of theme.liquid">
{`<style>
  :root {
    /* Colors — editable via theme editor */
    --color-ink:     {{ settings.color_ink | default: '#0a0a0a' }};
    --color-bone:    {{ settings.color_bone | default: '#f5f3ee' }};
    --color-paper:   #ffffff;
    --color-neon:    {{ settings.color_neon | default: '#ff2ec4' }};
    --color-yellow:  {{ settings.color_yellow | default: '#eaff00' }};
    --color-chrome:  {{ settings.color_chrome | default: '#cfcdc8' }};

    /* Neutrals (derived — not in editor) */
    --color-n100: #f5f3ee;
    --color-n200: #e3e0d8;
    --color-n300: #cfcdc8;
    --color-n400: #8a8884;
    --color-n500: #4a4844;

    /* Semantic */
    --color-positive: #1f8a4c;
    --color-negative: #c53030;

    /* Spacing (4px base unit) */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;
    --space-9:  96px;
    --space-10: 128px;

    /* Radii (intentionally tight) */
    --radius-none: 0;
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;

    /* Motion */
    --ease-standard: cubic-bezier(.2,.8,.2,1);
    --ease-spring:   cubic-bezier(.5,1.6,.4,1);
    --dur-fast:   120ms;
    --dur-base:   200ms;
    --dur-slow:   360ms;
    --dur-spring: 480ms;

    /* Layout */
    --page-width: {{ settings.page_width | default: 1440 }}px;
    --gutter:     {{ settings.gutter | default: 48 }}px;
    --header-height: 64px;
    --announcement-height: 40px;
    --header-offset: calc(var(--header-height) + var(--announcement-height));

    /* Type direction class — applied to <body> */
    --font-body:    'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono:    'JetBrains Mono', monospace;
    {%- if settings.type_direction == 'B' -%}
    --font-display: 'Fraunces', serif;
    {%- else -%}
    --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    {%- endif -%}
  }
</style>`}
    </LiquidStub>
    <Note>↳ All components reference CSS vars — never hardcode hex values in section CSS</Note>
  </Sub>
);

const SectionSchemaStubs = () => (
  <Sub no="4.3" title="Section schema stubs (copy-paste)">
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:S[5] }}>

      <div>
        <LiquidStub title="hero.liquid — {% schema %}">
{`{% schema %}
{
  "name": "Hero",
  "tag": "section",
  "class": "section-hero",
  "settings": [
    {
      "type": "text",
      "id": "kicker",
      "label": "Kicker",
      "placeholder": "DROP 02 · FW26"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading"
    },
    {
      "type": "richtext",
      "id": "body",
      "label": "Body copy"
    },
    {
      "type": "text",
      "id": "cta_label",
      "label": "CTA label",
      "default": "Shop now"
    },
    {
      "type": "url",
      "id": "cta_url",
      "label": "CTA URL"
    },
    {
      "type": "image_picker",
      "id": "bg_image",
      "label": "Background image"
    },
    {
      "type": "select",
      "id": "bg_color",
      "label": "Background colour",
      "options": [
        {"value":"ink","label":"Ink"},
        {"value":"bone","label":"Bone"},
        {"value":"neon","label":"Neon"},
        {"value":"chrome","label":"Chrome"}
      ],
      "default": "ink"
    },
    {
      "type": "checkbox",
      "id": "show_countdown",
      "label": "Show countdown",
      "default": false
    },
    {
      "type": "text",
      "id": "drop_date",
      "label": "Drop date (ISO 8601)",
      "placeholder": "2026-11-14T18:00:00+01:00"
    }
  ],
  "presets": [
    {
      "name": "Hero",
      "settings": {
        "bg_color": "ink",
        "cta_label": "Shop now"
      }
    }
  ]
}
{% endschema %}`}
        </LiquidStub>
      </div>

      <div>
        <LiquidStub title="collection-grid.liquid — {% schema %}">
{`{% schema %}
{
  "name": "Collection grid",
  "tag": "section",
  "class": "section-collection-grid",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "range",
      "id": "products_per_page",
      "label": "Products per page",
      "min": 4, "max": 48, "step": 4,
      "default": 12
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "label": "Columns (desktop)",
      "min": 2, "max": 4, "step": 1,
      "default": 4
    },
    {
      "type": "range",
      "id": "columns_mobile",
      "label": "Columns (mobile)",
      "min": 1, "max": 2, "step": 1,
      "default": 2
    },
    {
      "type": "checkbox",
      "id": "enable_quick_add",
      "label": "Enable quick-add",
      "default": true
    }
  ],
  "presets": [
    {
      "name": "Collection grid"
    }
  ]
}
{% endschema %}`}
        </LiquidStub>
      </div>
    </div>
    <Note>↳ Full schemas for all sections: see section 02. These two are the most-used — copy-paste and adjust.</Note>
  </Sub>
);

const SettingsSection = () => (
  <Section no="04" title="Settings" kicker="schema · css vars · liquid stubs">
    <GlobalSettingsSchema/>
    <CSSVarsSnippet/>
    <SectionSchemaStubs/>
  </Section>
);

Object.assign(window, { SettingsSection });