/* ══════════════════════════ PARTNERSHIP — Wholesale / Stockist Program Replaces the Scents section. A B2B inquiry for shops, vendors and brands seeking recurring bulk supply under a contract / deal. ══════════════════════════ */ const BUSINESS_TYPES = [ { value: '', label: 'Select business type…', disabled: true }, { value: 'retail', label: 'Retail shop / boutique' }, { value: 'online', label: 'Online store' }, { value: 'spa', label: 'Spa / wellness studio' }, { value: 'hospitality', label: 'Hotel / hospitality' }, { value: 'events', label: 'Event planner / florist' }, { value: 'distributor', label: 'Distributor / reseller' }, { value: 'subscription',label: 'Subscription box' }, { value: 'other', label: 'Other' }, ]; const ORDER_FREQUENCY = [ { value: '', label: 'Select frequency…', disabled: true }, { value: 'monthly', label: 'Monthly' }, { value: 'bimonthly', label: 'Every 2 months' }, { value: 'quarterly', label: 'Quarterly' }, { value: 'biannual', label: 'Twice a year' }, { value: 'seasonal', label: 'Seasonal / on demand' }, ]; const ORDER_VOLUME = [ { value: '', label: 'Select volume…', disabled: true }, { value: '25-50', label: '25 – 50 units / order' }, { value: '50-150', label: '50 – 150 units / order' }, { value: '150-500', label: '150 – 500 units / order' }, { value: '500+', label: '500+ units / order' }, ]; const PARTNER_PRODUCTS = ['Candles', 'Soaps', 'Jesmonite', 'Molds', 'White-label / custom line']; const PARTNER_BENEFITS = [ { t: 'Recurring supply', d: 'A standing cyclic order on a schedule that suits your floor — poured fresh, never warehoused.' }, { t: 'Wholesale pricing', d: 'Tiered margins that scale with volume, locked in for the length of your contract.' }, { t: 'White-label options', d: 'Your branding, custom scents and bespoke colourways — a line that is unmistakably yours.' }, { t: 'A dedicated maker', d: 'One studio contact, consistent quality, and priority lead times for partner accounts.' }, ]; function PartnerChevron() { 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 PartnershipSection() { const ref = React.useRef(null); const visible = useInView(ref, 0.1); const [sent, setSent] = React.useState(false); const [refId, setRefId] = React.useState(''); const [form, setForm] = React.useState({ business: '', type: '', website: '', social: '', description: '', products: [], volume: '', frequency: '', name: '', email: '', phone: '', }); const set = (k, v) => setForm(f => ({ ...f, [k]: v })); const toggleProduct = (p) => setForm(f => ({ ...f, products: f.products.includes(p) ? f.products.filter(x => x !== p) : [...f.products, p], })); const valid = form.business.trim() && form.type && /\S+@\S+\.\S+/.test(form.email) && form.name.trim(); const [sending, setSending] = React.useState(false); const [sendError, setSendError] = React.useState(''); const submit = async (e) => { e.preventDefault(); if (!valid || sending) return; setSending(true); setSendError(''); const id = 'CC-W' + Math.floor(100 + Math.random() * 900); try { const fd = new FormData(); fd.append('_subject', 'Partnership Inquiry \u2014 ' + id); fd.append('_form_type', 'partnership'); fd.append('reference', id); fd.append('business_name', form.business); fd.append('business_type', form.type); fd.append('website', form.website || 'Not provided'); fd.append('social_media', form.social || 'Not provided'); fd.append('description', form.description || 'Not provided'); fd.append('products', form.products.join(', ') || 'Not specified'); fd.append('order_volume', form.volume || 'Not specified'); fd.append('order_frequency', form.frequency || 'Not specified'); fd.append('name', form.name); fd.append('email', form.email); fd.append('phone', form.phone || 'Not provided'); 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); setSent(true); } catch (err) { setSendError('Something went wrong \u2014 please try again or email us directly.'); } finally { setSending(false); } }; /* ── 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 input = (key, type, ph) => React.createElement('input', { className: 'cc-input', type: type || 'text', value: form[key], onChange: e => set(key, e.target.value), placeholder: ph, }); 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(PartnerChevron), ), hint); return React.createElement('section', { id: 'partner', ref, className: 'cc-section cc-partner' + (visible ? ' in-view' : ''), }, React.createElement('div', { className: 'cc-section-header' }, React.createElement('p', { className: 'cc-eyebrow' }, 'Wholesale & Stockists'), React.createElement('h2', { className: 'cc-section-title' }, 'Partner With the Studio'), React.createElement('p', { className: 'cc-section-desc' }, 'Stock Candescent Cinders in your shop or brand under a standing wholesale agreement — recurring, made-to-order batches delivered on your schedule.' ), ), /* ── Benefits row ── */ React.createElement('div', { className: 'cc-partner-benefits' }, PARTNER_BENEFITS.map((b, i) => React.createElement('div', { key: i, className: 'cc-partner-benefit' }, React.createElement('span', { className: 'cc-partner-benefit-num' }, String(i + 1).padStart(2, '0')), React.createElement('h4', null, b.t), React.createElement('p', null, b.d), ) ), ), /* ── Inquiry form / success ── */ React.createElement('div', { className: 'cc-partner-formwrap' }, sent ? React.createElement('div', { className: 'cc-partner-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' }, 'Application 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', maxWidth: '420px', margin: '0 auto' } }, 'Thank you, ' + (form.business || 'partner') + '. Our wholesale team will review your details and reach out to ', React.createElement('strong', { style: { color: 'var(--cc-text-primary)', fontWeight: 400 } }, form.email || 'you'), ' within 3–5 business days to discuss terms and pricing.', ), React.createElement('button', { className: 'cc-btn cc-btn-ghost', style: { marginTop: '0.5rem' }, onClick: () => { setSent(false); setForm({ business: '', type: '', website: '', social: '', description: '', products: [], volume: '', frequency: '', name: '', email: '', phone: '' }); }, }, 'Submit another inquiry'), ) : React.createElement('form', { className: 'cc-partner-form', onSubmit: submit }, /* Group 1 — Business */ React.createElement('div', { className: 'cc-partner-group' }, React.createElement('p', { className: 'cc-partner-group-label' }, 'About your business'), React.createElement('div', { className: 'cc-partner-grid' }, labelled('Business name', input('business', 'text', 'e.g. The Maple Mercantile')), selectField('Business type', 'type', BUSINESS_TYPES), labelled('Website', input('website', 'url', 'https://')), labelled('Social media', input('social', 'text', '@yourbrand')), ), labelled('Tell us about your business', React.createElement('textarea', { className: 'cc-input cc-textarea', rows: 3, value: form.description, onChange: e => set('description', e.target.value), placeholder: 'Who are your customers, where do you sell, and what draws you to our work?', }), ), ), /* Group 2 — Partnership */ React.createElement('div', { className: 'cc-partner-group' }, React.createElement('p', { className: 'cc-partner-group-label' }, 'Partnership details'), labelled('Products you\u2019d like to stock', React.createElement('div', { className: 'cc-chip-row' }, PARTNER_PRODUCTS.map(p => React.createElement('button', { key: p, type: 'button', className: 'cc-toggle-chip' + (form.products.includes(p) ? ' selected' : ''), onClick: () => toggleProduct(p), }, p) ), ), ), React.createElement('div', { className: 'cc-partner-grid' }, selectField('Estimated order volume', 'volume', ORDER_VOLUME), selectField('Order frequency', 'frequency', ORDER_FREQUENCY), ), ), /* Group 3 — Contact */ React.createElement('div', { className: 'cc-partner-group' }, React.createElement('p', { className: 'cc-partner-group-label' }, 'Your contact details'), React.createElement('div', { className: 'cc-partner-grid' }, labelled('Contact name', input('name', 'text', 'Jane Smith')), labelled('Email address', input('email', 'email', 'jane@yourbrand.com')), labelled('Phone (optional)', input('phone', 'tel', '+1 (555) 000-0000')), ), ), React.createElement('div', { className: 'cc-partner-submit' }, React.createElement('p', { className: 'cc-partner-reassure' }, 'No obligation — we\u2019ll send a wholesale catalogue and pricing once we connect.' ), React.createElement('button', { type: 'submit', className: 'cc-btn cc-btn-primary', disabled: !valid, }, sending ? 'Sending\u2026' : 'Request Partnership'), sendError && React.createElement('p', { style: { color: '#e25', fontSize: '0.82rem', marginTop: '0.5rem' } }, sendError), ), ), ), ); } window.PartnershipSection = PartnershipSection;