/* ════════════════════════════════════════════════════════════════════════
scent-card.jsx — Phinn-Phang 香氣分析・共用視覺系統
------------------------------------------------------------------------
匯出（window）：
THEMES 兩個 theme（dark / cream）token 物件
deriveWork(work) 把 work 物件算成畫面需要的資料
Radar 7 軸 SVG 雷達（theme-aware）
ScreenView 【螢幕 view】全頁自然網頁流動、響應式
ExportCard 【下載 view】固定 840×1188 A4，截圖用
makeSerial 無 serialNumber 時的 fallback 序號
兩個 view 共用同一份資料與同一套視覺語言；ScreenView 鬆、ExportCard 密。
════════════════════════════════════════════════════════════════════════ */
const { useEffect: _useEffect, useRef: _useRef } = React;
/* ── THEMES ──────────────────────────────────────────────────────────────── */
const THEMES = {
dark: {
name: 'dark',
pageBg: 'radial-gradient(125% 90% at 50% 6%, #2a1610 0%, #1a0f0a 50%, #140c08 100%)',
cardPageBg: 'radial-gradient(125% 90% at 50% 8%, #2a1610 0%, #1a0f0a 52%, #140c08 100%)',
exportBg: '#160d08',
ink: '#F2EADD', inkSoft: 'rgba(242,234,221,0.66)', inkFaint: 'rgba(242,234,221,0.34)',
gold: '#C8965A', goldSoft: 'rgba(200,150,90,0.72)', goldFaint: 'rgba(200,150,90,0.26)',
coral: '#E8B5A0',
line: 'rgba(200,150,90,0.22)', hair: 'rgba(200,150,90,0.14)',
cardBg: 'linear-gradient(158deg, rgba(200,150,90,0.07), rgba(255,250,244,0.012))',
cardBorder: 'rgba(200,150,90,0.18)',
chipBorder: 'rgba(200,150,90,0.42)',
radarGrid: 'rgba(200,150,90,0.16)', radarFill: 'rgba(232,149,122,0.20)', radarStroke: '#E8B5A0',
barTrack: 'rgba(242,234,221,0.06)',
logo: 'uploads/logo_dark.png', wmOpacity: 0.05, famMix: null,
glow: '0 0 70px rgba(220,120,90,0.22)',
chromeBg: 'rgba(22,13,8,0.72)', chromeBorder: 'rgba(200,150,90,0.22)',
},
cream: {
name: 'cream',
pageBg: 'radial-gradient(125% 95% at 50% 0%, #FCF9F5 0%, #F5EFE6 55%, #E8DFD0 100%)',
cardPageBg: 'radial-gradient(125% 95% at 50% 0%, #FCF9F5 0%, #F5EFE6 55%, #E8DFD0 100%)',
exportBg: '#F5EFE6',
ink: '#2f2418', inkSoft: 'rgba(47,36,24,0.70)', inkFaint: 'rgba(47,36,24,0.40)',
gold: '#9a6324', goldSoft: 'rgba(140,90,40,0.80)', goldFaint: 'rgba(140,90,40,0.32)',
coral: '#bb6346',
line: 'rgba(120,85,45,0.30)', hair: 'rgba(120,85,45,0.18)',
cardBg: 'linear-gradient(158deg, rgba(255,252,245,0.55), rgba(220,200,165,0.18))',
cardBorder: 'rgba(120,85,45,0.24)',
chipBorder: 'rgba(140,95,45,0.45)',
radarGrid: 'rgba(120,85,45,0.22)', radarFill: 'rgba(187,99,70,0.18)', radarStroke: '#bb6346',
barTrack: 'rgba(70,50,30,0.08)',
logo: 'uploads/logo_light.png', wmOpacity: 0.05, famMix: '#3a2614',
glow: 'none',
chromeBg: 'rgba(243,236,220,0.78)', chromeBorder: 'rgba(120,85,45,0.26)',
},
};
/* hex helpers — darken family colours for the cream paper theme */
function _hex2rgb(h){ h=h.replace('#',''); if(h.length===3)h=h.split('').map(c=>c+c).join(''); const n=parseInt(h,16); return [n>>16&255,n>>8&255,n&255]; }
function _rgb2hex(r,g,b){ return '#'+[r,g,b].map(v=>Math.max(0,Math.min(255,Math.round(v))).toString(16).padStart(2,'0')).join(''); }
function _mix(a,b,t){ const A=_hex2rgb(a),B=_hex2rgb(b); return _rgb2hex(A[0]+(B[0]-A[0])*t,A[1]+(B[1]-A[1])*t,A[2]+(B[2]-A[2])*t); }
function famColor(c,t){ return t.famMix ? _mix(c, t.famMix, 0.30) : c; }
/* ── derive helpers ──────────────────────────────────────────────────────── */
function computeImpressions(radar){
const v = id => radar.find(d => d.id === id)?.value || 0;
const cl = n => Math.max(0, Math.min(100, Math.round(n)));
return [
{ zh: '清新感', value: cl((v('citrus') + v('green') + v('tea')) / 3) },
{ zh: '花香感', value: cl(v('floral')) },
{ zh: '木質感', value: cl((v('woody') + v('mossy') + v('balsam')) / 3) },
{ zh: '甜 感', value: cl((v('fruity') + v('sweety')) / 2) },
{ zh: '溫暖感', value: cl((v('balsam') + v('woody') + v('musk')) / 3) },
{ zh: '神秘感', value: cl((v('oriental') + v('musk')) / 2) },
{ zh: '清爽感', value: cl((v('citrus') + v('green') + v('fresh')) / 3) },
];
}
function makeSerial(work){
const src = (work.id || work.workName || 'pp') + '';
let h = 0; for (const c of src) h = (h * 31 + c.charCodeAt(0)) >>> 0;
return String(h % 10000).padStart(4, '0');
}
const _LAYERS = [
{ id: 'top', zh: '前調', en: 'TOP' },
{ id: 'middle', zh: '中調', en: 'HEART' },
{ id: 'base', zh: '後調', en: 'BASE' },
];
function deriveWork(work){
const radar = work.radarData?.length ? work.radarData : PP.computeRadar(work.formula);
const dims = computeImpressions(radar);
const families = PP.computeRadar(work.formula).filter(f => f.value > 0).sort((a, b) => b.value - a.value);
const total = work.totalDrops || work.formula.reduce((s, f) => s + (Number(f.drops) || 0), 0);
const layerData = _LAYERS.map(L => {
const items = work.formula.filter(f => f.layer === L.id);
const drops = items.reduce((s, f) => s + (Number(f.drops) || 0), 0);
return { ...L, items, drops, pct: total ? Math.round(drops / total * 100) : 0 };
});
const serial = (work.serialNumber != null && work.serialNumber !== '')
? String(work.serialNumber) : makeSerial(work);
const tagline = work.tagline || '';
return { radar, dims, families, layerData, total, serial, tagline };
}
/* 匯出卡調香手記截句：≤85 字直接回；否則截到前 85 字內最後一個句號（含）；
85 字內無句號 → 前 80 字 + 「…」。保證完整句、不硬切。unicode-safe。 */
function makeExportNote(text){
const s = (text || '').trim();
const chars = [...s];
if (chars.length <= 85) return s;
const head = chars.slice(0, 85).join('');
const lastPeriod = head.lastIndexOf('。');
if (lastPeriod >= 0) return head.slice(0, lastPeriod + 1);
return chars.slice(0, 80).join('') + '…';
}
/* ── Radar (SVG, theme-aware) ───────────────────────────────────────────────
size: 視覺尺寸（px maxWidth）。labelGap 控制標籤離環的距離。 */
function Radar({ dims, t, max = 286, labelFs = 13, valFs = 18, S = 320, cx = 160, cy = 158, R = 92 }){
const n = dims.length, step = (Math.PI * 2) / n, start = -Math.PI / 2;
// 動態軸 max：放大形狀貼合實際印象值範圍(~0-35)；下限 40 防全小值時爆滿失真，maxDim>40 時用 maxDim 確保最大維不超出環
const AXIS_MAX = Math.max(40, dims.reduce((m, d) => Math.max(m, d.value), 0));
const pt = (i, rad) => [cx + Math.cos(start + step * i) * rad, cy + Math.sin(start + step * i) * rad];
const ringPts = s => dims.map((_, i) => pt(i, R * s).join(',')).join(' ');
const dataPts = dims.map((d, i) => pt(i, R * Math.min(1, d.value / AXIS_MAX)).join(',')).join(' ');
return (
);
}
/* ── shared atoms ───────────────────────────────────────────────────────── */
function Label({ en, zh, t, big }){
return (
{en}
{zh && {zh}}
);
}
function Chip({ children, t, fs = 12.5 }){
return {children};
}
/* ════════════════════════════════════════════════════════════════════════
PERSONA BAND（SCENT TYPE）— 兩 view 共用，尺寸用 props 調
════════════════════════════════════════════════════════════════════════ */
function PersonaBand({ sp, t, big }){
if (!sp) return null;
return (
SCENT TYPE
{/型人格$/.test(sp.title) ? sp.title : `${sp.title}型人格`}
{Array.isArray(sp.keywords) && (
{sp.keywords.map((k, i) => {k})}
)}
);
}
/* ════════════════════════════════════════════════════════════════════════
RATIO（香調比例）— stacked bar + legend rows
════════════════════════════════════════════════════════════════════════ */
function RatioBlock({ families, t, rows = 6, big }){
return (
{families.slice(0, rows).map(f => (
{f.zh}
{f.value}%
))}
);
}
/* ════════════════════════════════════════════════════════════════════════
FORMULA（前中後調三欄）
════════════════════════════════════════════════════════════════════════ */
// d2: 對齊「香氣卡-D2」模板的放大字級（層調 25 / en 17 / pct 23 / 香精名 23 / 滴數 21 / 滴 18，cols gap 44）。
// 預設 undefined → falsy → 與原 big/small 行為完全相同，ScreenView 既有呼叫不受影響。
function FormulaCols({ layerData, t, big, className, d2 }){
return (
{layerData.map(L => (
{L.zh}
{L.en}
{L.pct}%
{L.items.length === 0 &&
—}
{L.items.map(ing => (
x.id === ing.family)?.color || t.gold, t), flexShrink: 0, transform: 'translateY(-1px)' }} />
{ing.name}
{ing.drops} 滴
))}
))}
{layerData.map((L, i) => (
))}
{data.map((c, i) => (
{c.en}
{c.zh}
{c.head &&
{c.head}
}
{c.body}
))}
{/* ── Header row ─────────────────────────────────────────── */}
No. {serial}
{work.courseDate || '—'}
{/* ── Hero ───────────────────────────────────────────────── */}
{/* ── SCENT TYPE band ────────────────────────────────────── */}
{sp && (
)}
{/* ── Creator's note（全文，與其他 section 同寬）─────────── */}
{work.aiDescription && (
)}
{/* ── Impression radar（單獨）─────────────────────────────── */}
{/* ── 配方 前中後調 ──────────────────────────────────────── */}
{/* ── 三張卡（全 null → 整 row skip，eyebrow 也不畫）──────── */}
{cards.length > 0 && (
)}
{/* ── Composition Ratio（移到最下方）──────────────────────── */}
{/* 最後一個 sv-sec：清掉 margin-bottom，讓「最後內容→©」間距統一交給 SiteFooter marginTop */}
{/* ── 手機操作區（分享 / IG / 回首頁）— footer 上方、僅手機顯示（桌機用頂部 Chrome）── */}
{/* ── Site footer（components.jsx 共用元件，© 2026 收尾）──── */}
{window.SiteFooter ?
: null}
{en}
{zh}
);
// .a4 是 flex column（work.html CSS）。inline 覆寫成 D2 bento：padding 64 72 56、gap 22；
// 可成長 row 用 flex 比例撐滿 1920，配方卡 flex:'0 0 auto' 貼合內容。各卡 overflow:hidden（批二精簡）。
return (
{/* 1. HEADER — logo + No.編號（Space Mono 24 + 42px 金色短線 + 日期），通欄固定高 */}
No. {serial}
{work.courseDate || '—'}
{/* 2. 第一屏：左欄(標題卡 + 人格卡 上下疊) / 右欄(雷達卡 span2，grid stretch → 與左欄等高) */}
{/* 左欄：兩格垂直堆疊 */}
{/* 左上 標題卡：香名 96 + 標語 27 */}
YOUR SCENT
{/* 大標題層：香名 —— D2 96px 理想，自適應降階；長度/語言不固定（wordBreak 接住長英文名） */}
{nm}
{/* 左下 人格卡：Scent Type + 型人格 + tags（還原卡片框；ptype 空則不印標題避免空殼） */}
{sp && (
{cardEyebrow('Scent Type', '香氣人格')}
{ptype &&
{ptype}
}
{Array.isArray(sp.keywords) && (
{sp.keywords.map((k, i) => (
{k}
))}
)}
)}
{/* 右欄 雷達卡（grid 預設 align stretch → 撐到與左欄兩格疊起來等高） */}
{cardEyebrow('Impression', '香氣印象')}
{/* 雷達放大填滿右格：R 加大讓雷達佔更多 viewBox；S/cx/cy 留邊讓維度標籤（R+30）不被裁切。
全靠 prop 傳值，Radar 本體未改；ScreenView 不傳 → default 不受影響。 */}
{/* 4. 旅程卡 調香手記 — 通欄（可成長；批一完整 aiDescription 可能爆格→裁切，批二精簡） */}
{cardEyebrow('Journey', '調香手記')}
{note}
{/* 5. Persona + Emotion 半卡並排（可成長；persona 標題 rose-bright、emotion 標題 ink） */}
{sp && (
{cardEyebrow('Persona', '香氣性格')}
關於香氣性格
{personaDesc}
)}
{ee && (
{cardEyebrow('Emotion', '情緒陪伴')}
{ee.mood &&
「{ee.mood}」
}
{emotionDesc}
)}
{/* 6. 配方卡 — 通欄（flex:0 0 auto 貼合內容）。FormulaCols 用新 d2 prop 放大層調/香精名/滴數 */}
{cardEyebrow('The Formula', `配方組成 · ${work.base?.name || ''}${work.base?.name ? ' · ' : ''}共 ${total} 滴`)}
{/* FOOTER — © line（固定高；批三再改 IG 引導＋版權，本批保留） */}
© 2026 Phinn-Phang. All rights reserved.