// store-pdp-sell.jsx — selling-landing building blocks for the product page.
// Each PDP doubles as a standalone landing (ads point straight at one SKU),
// so these blocks add the conversion scaffolding: pain hook, benefits,
// how-to steps, before/after, FAQ, repeat CTA. Bilingual (uk/en).
// Loaded BEFORE store-pdp.jsx so ProductPage can compose them.
const { useState: useSell, useState: useSellVis, useRef: useSellRef, useEffect: useSellEffect } = React;
// ── small line icons (simple strokes only) ──────────────────
const SI = {
drop: ,
shield: ,
leaf: ,
sun: ,
spark: ,
clock: ,
flask: ,
heartpulse: ,
};
// ── per-category selling copy ───────────────────────────────
const _def = {
q: { uk:'Догляд, що дає видимий результат — без зайвих кроків.', en:'Care that shows results — without the extra steps.' },
a: { uk:'Чиста формула з активами в робочій концентрації. Розроблено косметологами, протестовано на реактивній шкірі.', en:'A clean formula with actives at working strength. Built by cosmetologists, tested on reactive skin.' },
benefits: [
{ ic:'flask', h:{uk:'Активи, що працюють', en:'Actives that work'}, d:{uk:'Концентрації, підтверджені дослідженнями, без перевантаження шкіри.', en:'Research-backed concentrations, without overloading the skin.'} },
{ ic:'leaf', h:{uk:'Чистий склад', en:'Clean composition'}, d:{uk:'Без віддушок, барвників і спирту, що сушить. Підходить чутливій шкірі.', en:'No fragrance, dyes or drying alcohol. Suits sensitive skin.'} },
{ ic:'shield',h:{uk:'Бар’єр під захистом', en:'Barrier protected'}, d:{uk:'Підтримує мікробіом і ліпідний бар’єр, не порушуючи pH.', en:'Supports the microbiome and lipid barrier without disrupting pH.'} },
],
steps: [
{ tag:{uk:'Крок 1',en:'Step 1'}, h:{uk:'Очисти шкіру', en:'Cleanse'}, d:{uk:'Нанеси на чисту, злегка вологу шкіру обличчя.', en:'Apply to clean, slightly damp facial skin.'} },
{ tag:{uk:'Крок 2',en:'Step 2'}, h:{uk:'Розподіли засіб', en:'Apply'}, d:{uk:'2–3 краплі або горошину, рівномірно по масажних лініях.', en:'2–3 drops or a pea-size amount along massage lines.'} },
{ tag:{uk:'Крок 3',en:'Step 3'}, h:{uk:'Закріпи догляд', en:'Seal'}, d:{uk:'Завершіть кремом, вранці — SPF. Користуйся щодня.', en:'Finish with cream; SPF in the morning. Use daily.'} },
],
};
const SELL_COPY = {
serum: {
q: { uk:'Сироватка, яку шкіра відчуває з першого тижня.', en:'A serum your skin feels within the first week.' },
a: { uk:'Легка текстура з активами в робочій концентрації миттєво вбирається й працює там, де креми не дістають.', en:'A light texture with actives at working strength absorbs instantly and works where creams can’t reach.' },
benefits: [
{ ic:'drop', h:{uk:'Глибоке зволоження', en:'Deep hydration'}, d:{uk:'Гіалуронова кислота й пантенол утримують вологу впродовж дня.', en:'Hyaluronic acid and panthenol hold moisture all day.'} },
{ ic:'spark', h:{uk:'Рівний тон', en:'Even tone'}, d:{uk:'Антиоксиданти вирівнюють тон і повертають сяйво.', en:'Antioxidants even out tone and restore radiance.'} },
{ ic:'leaf', h:{uk:'Без подразнень', en:'No irritation'}, d:{uk:'Пре- та пробіотики зміцнюють бар’єр чутливої шкіри.', en:'Pre- & probiotics strengthen a sensitive barrier.'} },
],
steps: _def.steps,
},
cream: {
q: { uk:'Пружність і комфорт, які видно у дзеркалі.', en:'Firmness and comfort you can see in the mirror.' },
a: { uk:'Поживна формула відновлює ліпідний бар’єр і повертає шкірі тонус — без липкості й важкості.', en:'A nourishing formula restores the lipid barrier and brings back tone — without stickiness or heaviness.' },
benefits: [
{ ic:'heartpulse', h:{uk:'Ліфтинг-ефект', en:'Lifting effect'}, d:{uk:'Пептиди підтягують контур і розгладжують рельєф.', en:'Peptides tighten the contour and smooth texture.'} },
{ ic:'drop', h:{uk:'Живлення 24 год', en:'24h nourishment'}, d:{uk:'Олії та церациди тримають комфорт цілий день.', en:'Oils and ceramides keep comfort all day.'} },
{ ic:'shield', h:{uk:'Захист бар’єра', en:'Barrier defense'}, d:{uk:'Відновлює захисний шар і знижує реактивність.', en:'Rebuilds the protective layer and lowers reactivity.'} },
],
steps: _def.steps,
},
cleanse: {
q: { uk:'Чистота без відчуття стягнутості.', en:'Clean skin without the tight feeling.' },
a: { uk:'М’яко знімає макіяж, себум і SPF, зберігаючи захисний бар’єр і природний pH.', en:'Gently removes make-up, sebum and SPF while keeping the barrier and natural pH intact.' },
benefits: [
{ ic:'drop', h:{uk:'Делікатне очищення', en:'Gentle cleansing'}, d:{uk:'Розчиняє забруднення, не пересушуючи шкіру.', en:'Dissolves impurities without stripping the skin.'} },
{ ic:'leaf', h:{uk:'pH-баланс', en:'pH balanced'}, d:{uk:'Слабокисла формула підтримує мікробіом.', en:'A mildly acidic formula supports the microbiome.'} },
{ ic:'spark', h:{uk:'Готовність до догляду', en:'Primed skin'}, d:{uk:'Шкіра краще приймає сироватки й креми після очищення.', en:'Skin absorbs serums and creams better afterwards.'} },
],
steps: [
{ tag:{uk:'Крок 1',en:'Step 1'}, h:{uk:'Нанеси', en:'Apply'}, d:{uk:'На вологу шкіру, спінити легкими рухами.', en:'On damp skin, work into a light lather.'} },
{ tag:{uk:'Крок 2',en:'Step 2'}, h:{uk:'Масажуй', en:'Massage'}, d:{uk:'30–40 секунд по масажних лініях.', en:'30–40 seconds along massage lines.'} },
{ tag:{uk:'Крок 3',en:'Step 3'}, h:{uk:'Змий', en:'Rinse'}, d:{uk:'Теплою водою, продовжи тонером.', en:'With warm water, follow with toner.'} },
],
},
tone: {
q: { uk:'Тонер, що готує шкіру до всього догляду.', en:'A toner that preps skin for the whole routine.' },
a: { uk:'Відновлює pH після очищення, зволожує і підсилює дію наступних активів.', en:'Restores pH after cleansing, hydrates, and boosts the actives that follow.' },
benefits: _def.benefits,
steps: _def.steps,
},
spf: {
q: { uk:'Захист, який не хочеться змивати.', en:'Protection you won’t want to wash off.' },
a: { uk:'Широкий спектр SPF без білих слідів і липкості — комфортна база під макіяж щодня.', en:'Broad-spectrum SPF with no white cast or stickiness — a comfortable daily base under make-up.' },
benefits: [
{ ic:'sun', h:{uk:'SPF широкого спектра', en:'Broad-spectrum SPF'}, d:{uk:'Захист від UVA/UVB і фотостаріння.', en:'Guards against UVA/UVB and photo-ageing.'} },
{ ic:'drop', h:{uk:'Комфортна текстура', en:'Comfortable finish'}, d:{uk:'Без білих слідів, лягає рівно під тон.', en:'No white cast, sits smoothly under make-up.'} },
{ ic:'leaf', h:{uk:'Догляд у складі', en:'Skincare inside'}, d:{uk:'Антиоксиданти й зволоження протягом дня.', en:'Antioxidants and hydration through the day.'} },
],
steps: [
{ tag:{uk:'Крок 1',en:'Step 1'}, h:{uk:'Заверши догляд', en:'Finish care'}, d:{uk:'Нанеси після сироватки й крему.', en:'Apply after serum and cream.'} },
{ tag:{uk:'Крок 2',en:'Step 2'}, h:{uk:'Достатня кількість', en:'Enough product'}, d:{uk:'Дві фаланги пальців на обличчя й шию.', en:'Two finger-lengths for face and neck.'} },
{ tag:{uk:'Крок 3',en:'Step 3'}, h:{uk:'Онови вдень', en:'Re-apply'}, d:{uk:'Кожні 2–3 години на сонці.', en:'Every 2–3 hours in the sun.'} },
],
},
age: {
q: { uk:'Anti-age, що працює на результат, а не на обіцянки.', en:'Anti-age that works on results, not promises.' },
a: { uk:'Ретинол і пептиди в делікатній системі доставки розгладжують зморшки й повертають щільність шкіри.', en:'Retinol and peptides in a gentle delivery system smooth wrinkles and restore skin density.' },
benefits: [
{ ic:'spark', h:{uk:'Менше зморшок', en:'Fewer wrinkles'}, d:{uk:'Ретиноїди стимулюють оновлення й колаген.', en:'Retinoids boost renewal and collagen.'} },
{ ic:'heartpulse',h:{uk:'Щільність шкіри', en:'Skin density'}, d:{uk:'Пептиди підвищують пружність контуру.', en:'Peptides improve firmness of the contour.'} },
{ ic:'shield', h:{uk:'Делікатно', en:'Gentle system'}, d:{uk:'Інкапсульовані активи знижують подразнення.', en:'Encapsulated actives reduce irritation.'} },
],
steps: [
{ tag:{uk:'Вечір',en:'PM'}, h:{uk:'Тільки на ніч', en:'Night only'}, d:{uk:'Наноси ввечері на суху шкіру.', en:'Apply in the evening on dry skin.'} },
{ tag:{uk:'Старт',en:'Start'},h:{uk:'2–3 рази/тиждень', en:'2–3×/week'}, d:{uk:'Поступово збільшуй частоту.', en:'Increase frequency gradually.'} },
{ tag:{uk:'Завжди',en:'Always'},h:{uk:'SPF вранці', en:'SPF in AM'}, d:{uk:'Обов’язковий захист наступного дня.', en:'Daytime protection is a must.'} },
],
},
acne: {
q: { uk:'Контроль висипань без пересушування.', en:'Breakout control without over-drying.' },
a: { uk:'Кислоти й себорегулятори очищають пори й знижують запалення, зберігаючи бар’єр.', en:'Acids and sebum-regulators clear pores and calm inflammation while protecting the barrier.' },
benefits: [
{ ic:'drop', h:{uk:'Чисті пори', en:'Clear pores'}, d:{uk:'Кислоти розчиняють себум і зроговіння.', en:'Acids dissolve sebum and dead cells.'} },
{ ic:'leaf', h:{uk:'Менше запалень', en:'Less inflammation'},d:{uk:'Цинк і ніацинамід заспокоюють шкіру.', en:'Zinc and niacinamide calm the skin.'} },
{ ic:'shield',h:{uk:'Без пересушування', en:'No over-drying'}, d:{uk:'Працює точково, не руйнуючи бар’єр.', en:'Targets spots without stripping the barrier.'} },
],
steps: _def.steps,
},
};
const sellCopy = (cat) => SELL_COPY[cat] || _def;
// ── Trust / guarantee row (under hero CTA) ──────────────────
function SellTrust({ lang }) {
const items = [
{ ic: SI.shield, h: lang==='uk'?'Гарантія 30 днів':'30-day guarantee', s: lang==='uk'?'Повернемо кошти, якщо не підійде':'Money back if it’s not for you' },
{ ic: ,
h: lang==='uk'?'Доставка Новою Поштою':'Nova Poshta delivery', s: lang==='uk'?'По всій Україні, 1–3 дні':'Across Ukraine, 1–3 days' },
{ ic: ,
h: lang==='uk'?'Семпли у подарунок':'Free samples', s: lang==='uk'?'2 пробники до кожного замовлення':'2 testers with every order' },
];
return (
);
}
// ── Before / after band ─────────────────────────────────────
function SellBeforeAfter({ p, lang }) {
if (!p.beforeAfter) return null;
return (
{lang==='uk'?'До':'Before'}
{lang==='uk'?'Після':'After'}
{lang==='uk'?'Реальний результат':'Real result'}
{lang==='uk' ? `Зміни вже за ${p.beforeAfter.days} днів` : `Visible change in ${p.beforeAfter.days} days`}
{lang==='uk'
? 'Фото без ретуші, за умови щоденного застосування. Індивідуальний результат може відрізнятися.'
: 'Unretouched photos with daily use. Individual results may vary.'}
);
}
// ── FAQ accordion ───────────────────────────────────────────
function SellFaq({ p, lang, mobile }) {
const [open, setOpen] = useSell(0);
const faq = lang==='uk' ? [
{ q:'Чи підійде моєму типу шкіри?', a:'Формула розроблена для більшості типів, включно з чутливою. Якщо маєш активні дерматологічні стани — порадься з лікарем або пройди наш безкоштовний підбір.' },
{ q:'Коли буде помітний результат?', a:'Перші зміни — зволоження й комфорт — відчутні з першого тижня. Стійкий результат накопичується за 4–6 тижнів регулярного застосування.' },
{ q:'Як швидко доставите?', a:'Відправляємо щодня Новою Поштою. По Україні — 1–3 робочі дні. До кожного замовлення додаємо 2 пробники.' },
{ q:'Що, якщо не підійде?', a:'У тебе 30 днів на повернення. Напиши нам — повернемо кошти без зайвих питань.' },
] : [
{ q:'Will it suit my skin type?', a:'The formula is built for most skin types, including sensitive. If you have active dermatological conditions, consult a doctor or take our free quiz.' },
{ q:'When will I see results?', a:'Hydration and comfort are noticeable from the first week. Lasting results build over 4–6 weeks of regular use.' },
{ q:'How fast is delivery?', a:'We ship daily via Nova Poshta. Across Ukraine that’s 1–3 working days. Every order includes 2 free testers.' },
{ q:'What if it doesn’t work for me?', a:'You have 30 days to return it. Just message us and we’ll refund you — no hassle.' },
];
return (
![{b.h[lang]}]({`images/benefit-${(i)
))}
