/* ══════════════════════════
   CUSTOM ORDERS — Request a Quote
   A guided, vendor-style RFQ that replaces "Our Story".
══════════════════════════ */

const ORDER_TYPES = [
  { value: '',           label: 'Select a type…', disabled: true },
  { value: 'candle',     label: 'Candle — sculptural / figurative' },
  { value: 'jesmonite',  label: 'Jesmonite — trays, vessels, objects' },
  { value: 'soap',       label: 'Artisan soap' },
  { value: '3d-printed', label: '3D printed piece (PLA)' },
  { value: 'mold',       label: 'Custom silicone mold' },
  { value: 'other',      label: 'Something else entirely' },
];

const QUOTE_COLORS = ['Ivory', 'Blush', 'Dusty Rose', 'Sage', 'Terracotta', 'Charcoal', 'Noir', 'Gold'];

const TIMELINE_OPTS = [
  { value: 'flexible', label: "Flexible — no rush" },
  { value: '2-4wk',    label: 'Within 2–4 weeks' },
  { value: '1-2mo',    label: '1–2 months out' },
  { value: 'date',     label: 'I have a specific date' },
];

const ACCEPTED_FILES = 'image/*,.stl,.step,.stp,.obj,.3mf,.glb,.pdf,.zip';

const QUOTE_STEPS = ['The Piece', 'Details', 'References & You'];

function Chevron() {
  return React.createElement('span', { className: 'cc-select-chevron', 'aria-hidden': 'true' },
    React.createElement('svg', { width: 10, height: 6, viewBox: '0 0 10 6', fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round' },
      React.createElement('polyline', { points: '1,1 5,5 9,1' }),
    ),
  );
}

function fmtSize(bytes) {
  if (bytes < 1024) return bytes + ' B';
  if (bytes < 1048576) return (bytes / 1024).toFixed(0) + ' KB';
  return (bytes / 1048576).toFixed(1) + ' MB';
}

function CustomOrderSection() {
  const ref = React.useRef(null);
  const visible = useInView(ref, 0.12);

  const [step, setStep] = React.useState(0);
  const [submitted, setSubmitted] = React.useState(false);
  const [refId, setRefId] = React.useState('');
  const [dragOver, setDragOver] = React.useState(false);
  const [files, setFiles] = React.useState([]);
  const fileInputRef = React.useRef(null);

  const [form, setForm] = React.useState({
    type: '', quantity: '1', description: '',
    colors: [], colorNote: '', scent: '', dimensions: '', timeline: 'flexible',
    name: '', email: '', phone: '',
  });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const toggleColor = (c) => setForm(f => ({
    ...f, colors: f.colors.includes(c) ? f.colors.filter(x => x !== c) : [...f.colors, c],
  }));

  /* ── File handling ── */
  const addFiles = (list) => {
    const incoming = Array.from(list);
    setFiles(prev => {
      const seen = new Set(prev.map(p => p.name + p.size));
      return [...prev, ...incoming.filter(i => !seen.has(i.name + i.size))];
    });
  };
  const onDrop = (e) => { e.preventDefault(); setDragOver(false); if (e.dataTransfer.files.length) addFiles(e.dataTransfer.files); };

  /* ── Validation ── */
  const step0Valid = form.type && form.description.trim().length > 4;
  const step2Valid = form.name.trim() && /\S+@\S+\.\S+/.test(form.email);

  const next = () => setStep(s => Math.min(s + 1, QUOTE_STEPS.length - 1));
  const back = () => setStep(s => Math.max(s - 1, 0));

  const [sending, setSending] = React.useState(false);
  const [sendError, setSendError] = React.useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (!step2Valid || sending) return;
    setSending(true);
    setSendError('');
    const id = 'CC-' + Math.floor(1000 + Math.random() * 9000);
    try {
      const fd = new FormData();
      fd.append('_subject', 'Custom Order Request — ' + id);
      fd.append('_form_type', 'custom-order');
      fd.append('reference', id);
      fd.append('type', form.type);
      fd.append('quantity', form.quantity);
      fd.append('description', form.description);
      fd.append('colors', form.colors.join(', ') + (form.colorNote ? ' — ' + form.colorNote : ''));
      fd.append('scent', form.scent || 'Not specified');
      fd.append('dimensions', form.dimensions || 'Not specified');
      fd.append('timeline', form.timeline);
      fd.append('name', form.name);
      fd.append('email', form.email);
      fd.append('phone', form.phone || 'Not provided');
      files.forEach(f => fd.append('attachment', f, f.name));
      const res = await fetch('https://formspree.io/f/xjgdvwyd', { method: 'POST', body: fd, headers: { 'Accept': 'application/json' } });
      if (!res.ok) throw new Error('Server returned ' + res.status);
      setRefId(id);
      setSubmitted(true);
    } catch (err) {
      setSendError('Something went wrong — please try again or email us directly.');
    } finally {
      setSending(false);
    }
  };

  /* ════ Left column — the pitch + process ════ */
  const intro = React.createElement('div', { className: 'cc-custom-intro' },
    React.createElement('p', { className: 'cc-eyebrow' }, 'Bespoke Commissions'),
    React.createElement('h2', { className: 'cc-section-title' }, 'Commission a\nOne-of-a-Kind Piece'),
    React.createElement('p', { className: 'cc-body-text' },
      "Looking for something we don't make yet? Tell us what you have in mind — a sculptural candle, a cast jesmonite object, a printed form of your own design — and we'll hand-craft it to your exact specification."
    ),
    React.createElement('div', { className: 'cc-process-list' },
      [
        { n: '01', t: 'Share your vision', d: 'Describe the piece, pick colours and scent, and upload reference photos or 3D files (STL · STEP · OBJ).' },
        { n: '02', t: 'We review & quote', d: "We assess feasibility, materials and timing, then send a detailed written quote within 2–3 business days." },
        { n: '03', t: 'We craft it by hand', d: 'Once you approve the quote, your piece is poured, cast or printed in our studio and shipped to your door.' },
      ].map((p, i) =>
        React.createElement('div', { key: i, className: 'cc-process-step' },
          React.createElement('span', { className: 'cc-process-num' }, p.n),
          React.createElement('div', { className: 'cc-process-body' },
            React.createElement('h5', null, p.t),
            React.createElement('p', null, p.d),
          ),
        )
      ),
    ),
    React.createElement('p', { className: 'cc-custom-reassure' },
      'No commitment — a quote request is free and never obligates you to purchase.'
    ),
  );

  /* ════ Field helpers ════ */
  const labelled = (label, ctrl, hint) => React.createElement('div', { className: 'cc-field' },
    React.createElement('label', { className: 'cc-field-label' }, label),
    ctrl,
    hint && React.createElement('p', { className: 'cc-field-hint' }, hint),
  );

  const selectField = (label, key, opts, hint) => labelled(label,
    React.createElement('div', { className: 'cc-select-wrap' },
      React.createElement('select', {
        className: 'cc-option-select', value: form[key], onChange: e => set(key, e.target.value),
      },
        opts.map(o => React.createElement('option', { key: o.value, value: o.value, disabled: o.disabled }, o.label)),
      ),
      React.createElement(Chevron),
    ), hint);

  /* ════ Steps ════ */
  const stepPanels = [
    /* Step 0 — The Piece */
    React.createElement('div', { className: 'cc-quote-step', key: 'p0' },
      React.createElement('div', { className: 'cc-quote-grid' },
        selectField('What would you like made?', 'type', ORDER_TYPES),
        labelled('Approx. quantity',
          React.createElement('input', {
            className: 'cc-input', type: 'number', min: 1, value: form.quantity,
            onChange: e => set('quantity', e.target.value), placeholder: '1',
          }),
        ),
      ),
      labelled('Describe what you have in mind',
        React.createElement('textarea', {
          className: 'cc-input cc-textarea', rows: 5, value: form.description,
          onChange: e => set('description', e.target.value),
          placeholder: 'e.g. A 12cm cube candle with a hand-detailed magnolia relief on each face, in a soft ivory finish — a wedding centrepiece.',
        }),
        'The more detail you give, the more accurate your quote.'
      ),
    ),
    /* Step 1 — Details */
    React.createElement('div', { className: 'cc-quote-step', key: 'p1' },
      labelled('Colours & finish',
        React.createElement(React.Fragment, null,
          React.createElement('div', { className: 'cc-color-swatches' },
            QUOTE_COLORS.map(c =>
              React.createElement('button', {
                key: c, type: 'button',
                className: 'cc-swatch-btn' + (form.colors.includes(c) ? ' selected' : ''),
                onClick: () => toggleColor(c),
              },
                React.createElement('span', { className: 'cc-swatch-circle', style: { background: COLOR_SWATCHES[c] || '#ccc' } }),
                React.createElement('span', { className: 'cc-swatch-name' }, c),
              )
            ),
          ),
          React.createElement('input', {
            className: 'cc-input', type: 'text', value: form.colorNote,
            onChange: e => set('colorNote', e.target.value),
            placeholder: 'Or describe a custom colour / finish…',
            style: { marginTop: '0.6rem' },
          }),
        ),
      ),
      React.createElement('div', { className: 'cc-quote-grid' },
        selectField('Scent', 'scent', [
          { value: '', label: 'Not sure / recommend one', disabled: false },
          { value: 'Unscented', label: 'Unscented' },
          ...SCENTS.filter(s => s.name !== 'Unscented').map(s => ({ value: s.name, label: s.name + (s.type === 'blend' ? ' (blend)' : '') })),
        ], 'Only applies to candles & soaps.'),
        selectField('Timeline', 'timeline', TIMELINE_OPTS.map(o => ({ value: o.value, label: o.label }))),
      ),
      labelled('Approximate size / dimensions',
        React.createElement('input', {
          className: 'cc-input', type: 'text', value: form.dimensions,
          onChange: e => set('dimensions', e.target.value),
          placeholder: 'e.g. 8cm cube · 15cm tall · fits a 20cm tray',
        }),
      ),
    ),
    /* Step 2 — References & Contact */
    React.createElement('div', { className: 'cc-quote-step', key: 'p2' },
      labelled('Reference images & 3D files',
        React.createElement(React.Fragment, null,
          React.createElement('div', {
            className: 'cc-dropzone' + (dragOver ? ' dragover' : ''),
            onClick: () => fileInputRef.current && fileInputRef.current.click(),
            onDragOver: e => { e.preventDefault(); setDragOver(true); },
            onDragLeave: () => setDragOver(false),
            onDrop,
          },
            React.createElement('svg', { className: 'cc-dropzone-icon', width: 26, height: 26, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.3, strokeLinecap: 'round', strokeLinejoin: 'round' },
              React.createElement('path', { d: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' }),
              React.createElement('polyline', { points: '17 8 12 3 7 8' }),
              React.createElement('line', { x1: 12, y1: 3, x2: 12, y2: 15 }),
            ),
            React.createElement('p', { className: 'cc-dropzone-main' },
              React.createElement('span', null, 'Drag files here'), ' or click to browse',
            ),
            React.createElement('p', { className: 'cc-dropzone-sub' }, 'JPG · PNG · PDF · STL · STEP · OBJ · 3MF — up to 50MB each'),
            React.createElement('input', {
              ref: fileInputRef, type: 'file', multiple: true, accept: ACCEPTED_FILES,
              className: 'cc-dropzone-input', onChange: e => addFiles(e.target.files),
            }),
          ),
          files.length > 0 && React.createElement('ul', { className: 'cc-file-list' },
            files.map((f, i) =>
              React.createElement('li', { key: i, className: 'cc-file-item' },
                React.createElement('svg', { width: 14, height: 14, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.4 },
                  React.createElement('path', { d: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z' }),
                  React.createElement('polyline', { points: '14 2 14 8 20 8' }),
                ),
                React.createElement('span', { className: 'cc-file-name' }, f.name),
                React.createElement('span', { className: 'cc-file-size' }, fmtSize(f.size)),
                React.createElement('button', {
                  type: 'button', className: 'cc-file-remove', 'aria-label': 'Remove ' + f.name,
                  onClick: () => setFiles(prev => prev.filter((_, j) => j !== i)),
                }, '×'),
              )
            ),
          ),
        ),
      ),
      React.createElement('div', { className: 'cc-quote-grid' },
        labelled('Your name',
          React.createElement('input', { className: 'cc-input', type: 'text', value: form.name, onChange: e => set('name', e.target.value), placeholder: 'Jane Smith', required: true }),
        ),
        labelled('Email address',
          React.createElement('input', { className: 'cc-input', type: 'email', value: form.email, onChange: e => set('email', e.target.value), placeholder: 'jane@example.com', required: true }),
        ),
      ),
      labelled('Phone (optional)',
        React.createElement('input', { className: 'cc-input', type: 'tel', value: form.phone, onChange: e => set('phone', e.target.value), placeholder: '+1 (555) 000-0000' }),
      ),
    ),
  ];

  /* ════ Quote card ════ */
  const card = submitted
    ? React.createElement('div', { className: 'cc-quote-success' },
        React.createElement('div', { className: 'cc-quote-success-mark' },
          React.createElement('svg', { width: 28, height: 28, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.3, strokeLinecap: 'round', strokeLinejoin: 'round' },
            React.createElement('polyline', { points: '20 6 9 17 4 12' }),
          ),
        ),
        React.createElement('h3', { className: 'cc-quote-success-title' }, 'Request received'),
        React.createElement('p', { className: 'cc-quote-success-ref' }, 'Reference ', React.createElement('strong', null, refId)),
        React.createElement('p', { className: 'cc-body-text', style: { textAlign: 'center', margin: '0 auto' } },
          'Thank you, ' + (form.name.split(' ')[0] || 'friend') + '. Our studio will review your commission and send a detailed quote to ',
          React.createElement('strong', { style: { color: 'var(--cc-text-primary)', fontWeight: 400 } }, form.email || 'your inbox'),
          ' within 2–3 business days.',
        ),
        React.createElement('button', {
          className: 'cc-btn cc-btn-ghost', style: { marginTop: '0.5rem' },
          onClick: () => { setSubmitted(false); setStep(0); setFiles([]); setForm({ type: '', quantity: '1', description: '', colors: [], colorNote: '', scent: '', dimensions: '', timeline: 'flexible', name: '', email: '', phone: '' }); },
        }, 'Start another request'),
      )
    : React.createElement('form', { className: 'cc-quote-card', onSubmit: submit },
        /* Header + progress */
        React.createElement('div', { className: 'cc-quote-head' },
          React.createElement('div', { className: 'cc-quote-head-row' },
            React.createElement('span', { className: 'cc-quote-kicker' }, 'Request a Quote'),
            React.createElement('span', { className: 'cc-quote-count' }, 'Step ' + (step + 1) + ' / ' + QUOTE_STEPS.length),
          ),
          React.createElement('div', { className: 'cc-quote-track' },
            QUOTE_STEPS.map((s, i) =>
              React.createElement('div', { key: i, className: 'cc-quote-track-seg' + (i <= step ? ' active' : '') })
            ),
          ),
          React.createElement('div', { className: 'cc-quote-steplabels' },
            QUOTE_STEPS.map((s, i) =>
              React.createElement('button', {
                key: i, type: 'button',
                className: 'cc-quote-steplabel' + (i === step ? ' active' : '') + (i < step ? ' done' : ''),
                onClick: () => { if (i < step || (i === 1 && step0Valid) || i <= step) setStep(i); },
              }, s)
            ),
          ),
        ),
        /* Body */
        React.createElement('div', { className: 'cc-quote-body' }, stepPanels[step]),
        /* Nav */
        React.createElement('div', { className: 'cc-quote-nav' },
          step > 0
            ? React.createElement('button', { type: 'button', className: 'cc-btn cc-btn-ghost', onClick: back }, 'Back')
            : React.createElement('span', null),
          step < QUOTE_STEPS.length - 1
            ? React.createElement('button', {
                type: 'button', className: 'cc-btn cc-btn-primary',
                disabled: step === 0 && !step0Valid, onClick: next,
              }, 'Continue')
            : React.createElement('button', {
                type: 'submit', className: 'cc-btn cc-btn-primary', disabled: !step2Valid,
              }, sending ? 'Sending…' : 'Request My Quote'),
        ),
        sendError && React.createElement('p', { className: 'cc-form-error', style: { color: '#e25', textAlign: 'right', fontSize: '0.82rem', marginTop: '0.4rem' } }, sendError),
      );

  return React.createElement('section', {
    id: 'custom', ref, className: 'cc-section cc-custom' + (visible ? ' in-view' : ''),
  },
    React.createElement('div', { className: 'cc-custom-inner' },
      intro,
      React.createElement('div', { className: 'cc-quote-col' }, card),
    ),
  );
}

window.CustomOrderSection = CustomOrderSection;