// SommWine — Cotação (price comparison) + Clube (social feed) // ═══════════════════════════════════════════════════════════════ // Helper: Sommelier rating wheel (original SommWine design) // ═══════════════════════════════════════════════════════════════ function SWRatingWheel({ value = 4.0, onChange, P, T, size = 200, interactive = true }) { // value is 1.0 - 5.0 → angle from -135° (1) to +135° (5), sweeping 270° const toAngle = (v) => -135 + ((v - 1) / 4) * 270; const angle = toAngle(value); const r = size / 2 - 16; const cx = size / 2, cy = size / 2; // ticks const ticks = []; for (let i = 0; i < 51; i++) { const t = i / 50; const v = 1 + t * 4; const a = (toAngle(v) - 90) * Math.PI / 180; const inner = i % 10 === 0 ? r - 12 : (i % 5 === 0 ? r - 8 : r - 5); ticks.push({ x1: cx + Math.cos(a) * inner, y1: cy + Math.sin(a) * inner, x2: cx + Math.cos(a) * r, y2: cy + Math.sin(a) * r, active: v <= value, major: i % 10 === 0, }); } // arc path from -135° to current angle const arcPath = (() => { const startA = (-135 - 90) * Math.PI / 180; const endA = (angle - 90) * Math.PI / 180; const x1 = cx + Math.cos(startA) * r, y1 = cy + Math.sin(startA) * r; const x2 = cx + Math.cos(endA) * r, y2 = cy + Math.sin(endA) * r; const large = (angle - (-135)) > 180 ? 1 : 0; return `M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2}`; })(); // knob position const knobA = (angle - 90) * Math.PI / 180; const kx = cx + Math.cos(knobA) * r, ky = cy + Math.sin(knobA) * r; // drag handling const svgRef = React.useRef(null); const setFromEvent = (e) => { if (!interactive || !onChange) return; const pt = e.touches?.[0] || e; const rect = svgRef.current.getBoundingClientRect(); const dx = pt.clientX - rect.left - size / 2; const dy = pt.clientY - rect.top - size / 2; let a = Math.atan2(dy, dx) * 180 / Math.PI + 90; // 0 at top if (a > 180) a -= 360; if (a < -135) a = -135; if (a > 135) a = 135; const v = 1 + ((a + 135) / 270) * 4; onChange(Math.round(v * 10) / 10); }; // gradient stops based on value const arcColor = value < 2.5 ? P.muted : value < 3.5 ? P.gold : value < 4.5 ? P.cork : P.burgundy; return ( e.buttons === 1 && setFromEvent(e)} onTouchStart={setFromEvent} onTouchMove={setFromEvent} style={{ display: 'block', touchAction: 'none', cursor: interactive ? 'pointer' : 'default' }} > {/* outer ring */} {/* ticks */} {ticks.map((t, i) => ( ))} {/* active arc */} {/* numeric labels at 1,2,3,4,5 */} {[1,2,3,4,5].map(v => { const a = (toAngle(v) - 90) * Math.PI / 180; const tr = r - 24; return ( {v} ); })} {/* knob */} {/* center: star + number */} ★ {value.toFixed(1)} ); } // ═══════════════════════════════════════════════════════════════ // 6. COTAÇÃO — price comparison // ═══════════════════════════════════════════════════════════════ function SWQuote({ P, T, cellar, onOpenWine }) { // default to first wine in cellar, else first overall const cellarIds = SW_WINES.filter(w => cellar.has(w.id)).map(w => w.id); const [selectedId, setSelectedId] = React.useState(cellarIds[0] || SW_WINES[0].id); const [region, setRegion] = React.useState('São Paulo'); const [alert, setAlert] = React.useState(false); const wine = SW_WINES.find(w => w.id === selectedId); const prices = SW_RETAILERS.map(r => ({ ...r, price: Math.round(wine.price * r.mult), })).sort((a, b) => a.price - b.price); const min = prices[0].price; const max = prices[prices.length - 1].price; const avg = Math.round(prices.reduce((n, p) => n + p.price, 0) / prices.length); const best = prices[0]; const savings = max - min; const history = SW_PRICE_HISTORY.map(m => Math.round(wine.price * m)); return (
{/* vintage corks backdrop on top */}
{/* header */}
Preço de mercado

Cotação

{/* wine selector strip */}
{SW_WINES.map(w => { const active = selectedId === w.id; return ( ); })}
{/* best price card */}
{/* grape texture */}
✦ Melhor preço hoje
R$
{min.toLocaleString('pt-BR')}
em {best.name} · {best.ship}
Economia
R$ {savings}
Vs. média
−{Math.round((1 - min/avg) * 100)}%
{/* price history */}
Últimos 6 meses
↘ −{Math.round((1 - history[5]/history[0]) * 100)}%
{/* retailer list */}
{prices.length} ofertas encontradas
min · méd · máx
{prices.map((r, i) => { const isBest = i === 0; const delta = r.price - avg; return (
{/* rank */}
{i + 1}
{r.name} {r.kind === 'online' ? 'online' : r.kind === 'fisica' ? 'loja' : 'mercado'}
{r.city} · {r.ship}
R$ {r.price.toLocaleString('pt-BR')}
0 ? P.wine : P.muted, letterSpacing: '0.06em', }}> {delta < 0 ? '↘ ' : delta > 0 ? '↗ +' : ''}{delta !== 0 ? `R$ ${Math.abs(delta)}` : '= méd'}
); })}
{/* alert toggle */}
); } function SWSparkline({ values, P, T }) { const w = 320, h = 60, pad = 8; const min = Math.min(...values), max = Math.max(...values); const range = max - min || 1; const pts = values.map((v, i) => { const x = pad + (i / (values.length - 1)) * (w - pad * 2); const y = h - pad - ((v - min) / range) * (h - pad * 2); return [x, y]; }); const path = pts.map(([x, y], i) => `${i ? 'L' : 'M'} ${x} ${y}`).join(' '); const area = `${path} L ${pts[pts.length-1][0]} ${h} L ${pts[0][0]} ${h} Z`; const months = ['nov','dez','jan','fev','mar','abr']; return ( {pts.map(([x, y], i) => ( ))} {pts.map(([x], i) => ( {months[i]} ))} ); } // ═══════════════════════════════════════════════════════════════ // 7. CLUBE — social feed // ═══════════════════════════════════════════════════════════════ function SWClub({ P, T, onOpenWine }) { const [composeOpen, setComposeOpen] = React.useState(false); const [draftRating, setDraftRating] = React.useState(4.0); const [draftText, setDraftText] = React.useState(''); const [draftWineId, setDraftWineId] = React.useState(SW_WINES[0].id); const [feed, setFeed] = React.useState(SW_POSTS); const [liked, setLiked] = React.useState(new Set()); const toggleLike = (postId) => { setLiked(prev => { const next = new Set(prev); if (next.has(postId)) next.delete(postId); else next.add(postId); return next; }); }; const publish = () => { if (!draftText.trim()) return; const newPost = { id: 'p' + Date.now(), userId: 'me', wineId: draftWineId, rating: draftRating, when: 'agora', text: draftText.trim(), likes: 0, comments: 0, location: 'Sua adega', }; setFeed([newPost, ...feed]); setDraftText(''); setDraftRating(4.0); setComposeOpen(false); }; return (
{/* cellar arch backdrop on top */}
{/* header */}
Entre sommeliers

Clube SommWine

4 ativos
{/* friends row (stories-ish) */}
+
Convidar
{SW_FRIENDS.map(f => (
{f.initials}
{f.name.split(' ')[0]}
))}
{/* compose */}
{!composeOpen ? ( ) : (
{/* wine picker mini */}
{SW_WINES.map(w => ( ))}
{/* rating wheel */}
O que achou?