// parts.jsx — reusable components & visuals for ALIAD site
// Exports to window: Logo, LogoMark, Icon, InstaTile, DotsField, PhotoSlot, Silhouette

// ─── ALIAD logo mark (the circular dots) ──────────────────────────────────
function LogoMark({ size = 56, blue = '#1F5673', gold = '#E5B73B' }) {
  const dots = [];
  const outer = [[200,150],[205,195],[185,235],[150,268],[110,285],[70,285],[40,270],[22,240]];
  outer.forEach(([x,y],i) => dots.push({x,y,r:22-i*1.2,c:blue}));
  const mid = [[205,110],[185,80],[155,60],[120,50],[85,55],[55,75],[38,105]];
  mid.forEach(([x,y],i) => dots.push({x,y,r:14-i*0.6,c:i<3?gold:blue}));
  const inner = [[165,95],[140,78],[115,75],[92,88],[78,110],[72,138],[80,165],[98,188],[122,200],[148,200],[170,188],[183,168],[188,145],[182,125]];
  inner.forEach(([x,y],i) => dots.push({x,y,r:Math.max(2.5,9-i*0.45),c:gold}));
  return (
    <svg viewBox="0 0 240 320" width={size} height={size*320/240} style={{display:'block'}}>
      {dots.map((d,i)=>(<circle key={i} cx={d.x} cy={d.y} r={d.r} fill={d.c}/>))}
    </svg>
  );
}

function Logo({ size = 40, color = '#C25A30', subColor = '#C25A30', tagline = true }) {
  return (
    <div style={{display:'flex', alignItems:'center', gap: 14}}>
      <LogoMark size={size} />
      <div style={{display:'flex', flexDirection:'column', lineHeight:1}}>
        <div className="serif" style={{
          fontSize: size*0.72, color, letterSpacing:'0.01em', fontWeight: 500,
        }}>
          Association <b style={{fontWeight:600}}>ALIAD</b>
        </div>
        {tagline && (
          <div style={{
            fontSize: size*0.24, color: subColor, opacity: 0.85,
            letterSpacing:'0.22em', textTransform:'uppercase',
            marginTop: size*0.18, fontWeight: 500,
          }}>Au service de tous les âges</div>
        )}
      </div>
    </div>
  );
}

// ─── Service & UI icons ──────────────────────────────────────────────────
function Icon({ name, size = 44, color = 'currentColor' }) {
  const s = { width:size, height:size, fill:'none', stroke:color, strokeWidth:1.6, strokeLinecap:'round', strokeLinejoin:'round' };
  if (name === 'home') return (<svg viewBox="0 0 48 48" {...s}><path d="M8 22 L24 9 L40 22 V39 a2 2 0 0 1 -2 2 H10 a2 2 0 0 1 -2-2 Z"/><path d="M19 41 V28 h10 v13"/><circle cx="24" cy="20" r="2" fill={color} stroke="none"/></svg>);
  if (name === 'family') return (<svg viewBox="0 0 48 48" {...s}><circle cx="16" cy="15" r="5"/><circle cx="32" cy="15" r="5"/><path d="M6 38 c0-6 4-10 10-10 s10 4 10 10"/><path d="M22 38 c0-6 4-10 10-10 s10 4 10 10"/><circle cx="24" cy="27" r="3"/><path d="M21 38 v-5 a3 3 0 0 1 6 0 v5"/></svg>);
  if (name === 'meal') return (<svg viewBox="0 0 48 48" {...s}><circle cx="24" cy="26" r="14"/><circle cx="24" cy="26" r="9"/><path d="M10 26 h28"/><path d="M14 11 v8 M18 11 v8 M14 19 c0 2 1 4 4 4"/><path d="M34 11 c-2 0-3 3-3 6 s1 6 3 6 v-12"/></svg>);
  if (name === 'mediation') return (<svg viewBox="0 0 48 48" {...s}><path d="M8 26 v-8 a3 3 0 0 1 3-3 h12 a3 3 0 0 1 3 3 v8 a3 3 0 0 1 -3 3 h-8 l-5 5 v-5 a3 3 0 0 1 -2-3 Z"/><path d="M22 30 v-6 a3 3 0 0 1 3-3 h12 a3 3 0 0 1 3 3 v6 a3 3 0 0 1 -3 3 h-5 l-4 4 v-4 a3 3 0 0 1 -3-3 z" transform="translate(0 4)"/></svg>);
  if (name === 'wellbeing') return (<svg viewBox="0 0 48 48" {...s}><path d="M24 40 C8 28 8 14 16 12 c4-1 7 1 8 4 c1-3 4-5 8-4 c8 2 8 16-8 28 Z"/><path d="M24 28 v-6 M20 24 l4 4 4-4"/></svg>);
  if (name === 'youth') return (<svg viewBox="0 0 48 48" {...s}><circle cx="24" cy="16" r="7"/><path d="M11 40 c0-8 6-14 13-14 s13 6 13 14"/><path d="M16 33 q8 6 16 0"/></svg>);
  if (name === 'arrow') return (<svg viewBox="0 0 24 24" {...s}><path d="M5 12 h14 M13 6 l6 6 -6 6"/></svg>);
  if (name === 'phone') return (<svg viewBox="0 0 24 24" {...s}><path d="M4 6 c0-1 1-2 2-2 h2 l2 5 -2 1 c1 3 3 5 6 6 l1-2 5 2 v2 c0 1-1 2-2 2 C10 20 4 14 4 6 Z"/></svg>);
  if (name === 'mail') return (<svg viewBox="0 0 24 24" {...s}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7 l9 7 9-7"/></svg>);
  if (name === 'pin') return (<svg viewBox="0 0 24 24" {...s}><path d="M12 22 s8-7 8-13 a8 8 0 0 0 -16 0 c0 6 8 13 8 13 Z"/><circle cx="12" cy="9" r="3"/></svg>);
  if (name === 'clock') return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9"/><path d="M12 7 v5 l3 2"/></svg>);
  if (name === 'play') return (<svg viewBox="0 0 24 24" fill={color} stroke="none"><path d="M7 5 v14 l12-7 z"/></svg>);
  if (name === 'insta') return (<svg viewBox="0 0 24 24" {...s}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill={color} stroke="none"/></svg>);
  if (name === 'fb') return (<svg viewBox="0 0 24 24" fill={color} stroke="none"><path d="M13 22 v-9 h3 l.5-4 H13 V6.5 c0-1 .3-2 2-2 H17 V1 h-3 c-3 0-5 2-5 5 v3 H6 v4 h3 v9 z"/></svg>);
  return null;
}

// ─── Decorative dot pattern ──────────────────────────────────────────────
function DotsField({ color = '#1F5673', opacity = 0.18, w = 260, h = 260 }) {
  const dots = [];
  const cols = 8, rows = 8;
  for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++) {
    const x = 14 + c*(w-28)/(cols-1);
    const y = 14 + r*(h-28)/(rows-1);
    const d = Math.hypot(c - cols+1, r - rows+1) / Math.hypot(cols-1, rows-1);
    const rad = 1 + (1-d) * 5;
    dots.push(<circle key={`${r}-${c}`} cx={x} cy={y} r={rad} fill={color} opacity={opacity * (1-d*0.6)}/>);
  }
  return <svg viewBox={`0 0 ${w} ${h}`} width={w} height={h} style={{display:'block'}}>{dots}</svg>;
}

// ─── Silhouette illustrations (Afro-Caribbean figures, placeholders) ─────
// Soft, respectful, abstract silhouettes — warm brown skin tone, natural
// hair / head wraps, suggested smile. Stand in until real photos are dropped.
const SKIN_LIGHT = '#A87B5C';
const SKIN_MID   = '#7E5238';
const SKIN_DEEP  = '#5C3621';
const WRAP_A     = '#C25A30';  // terracotta
const WRAP_B     = '#E5B73B';  // gold

function Silhouette({ kind = 'elder-woman', bg = '#F8F1E1' }) {
  // viewBox 400x400 (square). Components are positioned to look composed.
  const figures = {
    'elder-woman': (
      <g>
        {/* shoulders */}
        <path d="M80 400 C 80 280 140 250 200 250 C 260 250 320 280 320 400 Z" fill={SKIN_MID}/>
        {/* dress accent */}
        <path d="M80 400 C 100 360 140 340 200 340 C 260 340 300 360 320 400 Z" fill={WRAP_A} opacity="0.5"/>
        {/* neck */}
        <rect x="178" y="220" width="44" height="50" rx="8" fill={SKIN_MID}/>
        {/* face */}
        <ellipse cx="200" cy="170" rx="62" ry="74" fill={SKIN_LIGHT}/>
        {/* head wrap (madras) */}
        <path d="M138 130 C 138 80 168 60 200 60 C 232 60 268 80 268 130 C 268 150 258 160 248 160 L 152 160 C 142 160 138 150 138 130 Z" fill={WRAP_A}/>
        <path d="M152 110 C 168 80 210 75 240 95 C 250 100 256 115 252 130 L 152 130 Z" fill={WRAP_B}/>
        <path d="M148 138 L 252 138 L 248 156 L 152 156 Z" fill={WRAP_A} opacity="0.7"/>
        {/* knot */}
        <path d="M268 90 C 290 80 300 100 290 118 C 280 130 270 124 268 110 Z" fill={WRAP_B}/>
        {/* eyes — gentle closed-smile arcs */}
        <path d="M175 175 q 8 -6 16 0" stroke={SKIN_DEEP} strokeWidth="3" fill="none" strokeLinecap="round"/>
        <path d="M209 175 q 8 -6 16 0" stroke={SKIN_DEEP} strokeWidth="3" fill="none" strokeLinecap="round"/>
        {/* smile */}
        <path d="M185 205 q 15 10 30 0" stroke={SKIN_DEEP} strokeWidth="3" fill="none" strokeLinecap="round"/>
        {/* earrings */}
        <circle cx="142" cy="180" r="4" fill={WRAP_B}/>
        <circle cx="258" cy="180" r="4" fill={WRAP_B}/>
      </g>
    ),
    'elder-man': (
      <g>
        {/* shoulders */}
        <path d="M80 400 C 80 290 140 260 200 260 C 260 260 320 290 320 400 Z" fill="#234862"/>
        {/* shirt collar */}
        <path d="M180 260 L 200 290 L 220 260 Z" fill="#F8F1E1" opacity="0.85"/>
        {/* neck */}
        <rect x="180" y="230" width="40" height="40" rx="8" fill={SKIN_DEEP}/>
        {/* face */}
        <ellipse cx="200" cy="170" rx="60" ry="72" fill={SKIN_MID}/>
        {/* hair — short white/grey beard suggestion */}
        <path d="M142 150 C 140 105 165 75 200 75 C 235 75 260 105 258 150 C 258 130 240 115 200 115 C 160 115 142 130 142 150 Z" fill="#3A2418"/>
        {/* grey hair specks */}
        <circle cx="170" cy="110" r="4" fill="#E8E2D6" opacity="0.7"/>
        <circle cx="230" cy="108" r="4" fill="#E8E2D6" opacity="0.7"/>
        <circle cx="200" cy="98" r="3" fill="#E8E2D6" opacity="0.7"/>
        {/* short beard */}
        <path d="M156 200 C 165 230 180 245 200 245 C 220 245 235 230 244 200 C 230 210 210 215 200 215 C 190 215 170 210 156 200 Z" fill="#3A2418" opacity="0.85"/>
        {/* eyes */}
        <path d="M172 175 q 8 -5 16 0" stroke="#1A0F08" strokeWidth="3" fill="none" strokeLinecap="round"/>
        <path d="M212 175 q 8 -5 16 0" stroke="#1A0F08" strokeWidth="3" fill="none" strokeLinecap="round"/>
        {/* smile */}
        <path d="M185 200 q 15 8 30 0" stroke="#1A0F08" strokeWidth="3" fill="none" strokeLinecap="round"/>
      </g>
    ),
    'grandma-child': (
      <g>
        {/* grandma — left */}
        <g transform="translate(-30 0)">
          <path d="M40 400 C 40 290 90 260 150 260 C 210 260 250 290 250 400 Z" fill={WRAP_A} opacity="0.65"/>
          <ellipse cx="150" cy="180" rx="55" ry="66" fill={SKIN_LIGHT}/>
          <path d="M95 145 C 95 95 120 75 150 75 C 180 75 205 95 205 145 L 95 145 Z" fill={WRAP_A}/>
          <path d="M105 120 C 120 95 180 95 195 120 L 105 120 Z" fill={WRAP_B}/>
          <path d="M125 185 q 7 -5 14 0" stroke={SKIN_DEEP} strokeWidth="3" fill="none" strokeLinecap="round"/>
          <path d="M161 185 q 7 -5 14 0" stroke={SKIN_DEEP} strokeWidth="3" fill="none" strokeLinecap="round"/>
          <path d="M138 212 q 12 8 24 0" stroke={SKIN_DEEP} strokeWidth="3" fill="none" strokeLinecap="round"/>
        </g>
        {/* child — right */}
        <g transform="translate(40 60)">
          <path d="M180 400 C 180 320 220 295 270 295 C 320 295 360 320 360 400 Z" fill={WRAP_B}/>
          <ellipse cx="270" cy="245" rx="42" ry="50" fill={SKIN_MID}/>
          {/* twin afro puffs */}
          <circle cx="232" cy="208" r="22" fill="#2A1A0F"/>
          <circle cx="308" cy="208" r="22" fill="#2A1A0F"/>
          <path d="M232 222 C 232 195 250 192 270 192 C 290 192 308 195 308 222 L 232 222 Z" fill="#2A1A0F"/>
          {/* face */}
          <path d="M254 250 q 6 -4 12 0" stroke="#1A0F08" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <path d="M274 250 q 6 -4 12 0" stroke="#1A0F08" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <path d="M260 270 q 10 6 20 0" stroke="#1A0F08" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        </g>
      </g>
    ),
    'family': (
      <g>
        {/* back layer — father */}
        <g transform="translate(-40 -10)">
          <path d="M40 400 C 40 295 90 265 150 265 C 210 265 260 295 260 400 Z" fill="#2D5670"/>
          <ellipse cx="150" cy="170" rx="55" ry="65" fill={SKIN_DEEP}/>
          <path d="M95 145 C 95 95 120 75 150 75 C 180 75 205 95 205 145 C 205 125 180 115 150 115 C 120 115 95 125 95 145 Z" fill="#1A0F08"/>
          <path d="M125 175 q 7 -4 14 0" stroke="#1A0F08" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <path d="M161 175 q 7 -4 14 0" stroke="#1A0F08" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <path d="M138 198 q 12 6 24 0" stroke="#1A0F08" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        </g>
        {/* mother — right */}
        <g transform="translate(50 -5)">
          <path d="M160 400 C 160 295 210 265 270 265 C 330 265 380 295 380 400 Z" fill={WRAP_A} opacity="0.75"/>
          <ellipse cx="270" cy="170" rx="54" ry="64" fill={SKIN_LIGHT}/>
          {/* hair — natural afro */}
          <path d="M210 150 C 200 90 232 60 270 60 C 308 60 340 90 330 150 C 330 130 308 115 270 115 C 232 115 210 130 210 150 Z" fill="#1A0F08"/>
          <ellipse cx="270" cy="100" rx="62" ry="35" fill="#1A0F08"/>
          <path d="M246 175 q 7 -4 14 0" stroke={SKIN_DEEP} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <path d="M280 175 q 7 -4 14 0" stroke={SKIN_DEEP} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <path d="M258 200 q 12 7 24 0" stroke={SKIN_DEEP} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        </g>
        {/* child — front center */}
        <g transform="translate(5 90)">
          <path d="M140 400 C 140 340 175 320 215 320 C 255 320 290 340 290 400 Z" fill={WRAP_B}/>
          <ellipse cx="215" cy="270" rx="38" ry="45" fill={SKIN_MID}/>
          <path d="M180 254 C 178 220 198 205 215 205 C 232 205 252 220 250 254 C 240 244 226 240 215 240 C 204 240 190 244 180 254 Z" fill="#1A0F08"/>
          <path d="M200 273 q 5 -3 10 0" stroke="#1A0F08" strokeWidth="2" fill="none" strokeLinecap="round"/>
          <path d="M220 273 q 5 -3 10 0" stroke="#1A0F08" strokeWidth="2" fill="none" strokeLinecap="round"/>
          <path d="M207 292 q 8 5 16 0" stroke="#1A0F08" strokeWidth="2" fill="none" strokeLinecap="round"/>
        </g>
      </g>
    ),
    'caregiver': (
      <g>
        {/* elder — seated, left */}
        <g transform="translate(20 40)">
          <path d="M30 400 C 30 320 75 290 130 290 C 185 290 220 320 220 400 Z" fill="#9E8A6A"/>
          <ellipse cx="130" cy="200" rx="50" ry="60" fill={SKIN_LIGHT}/>
          {/* white hair */}
          <path d="M82 178 C 82 130 105 110 130 110 C 155 110 178 130 178 178 C 165 160 145 155 130 155 C 115 155 95 160 82 178 Z" fill="#E8E2D6"/>
          <path d="M108 205 q 7 -4 14 0" stroke={SKIN_DEEP} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <path d="M138 205 q 7 -4 14 0" stroke={SKIN_DEEP} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <path d="M120 228 q 10 6 20 0" stroke={SKIN_DEEP} strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        </g>
        {/* caregiver — standing behind, right */}
        <g transform="translate(150 0)">
          <path d="M150 400 C 150 280 195 250 240 250 C 285 250 330 280 330 400 Z" fill={WRAP_A}/>
          <ellipse cx="240" cy="170" rx="48" ry="58" fill={SKIN_MID}/>
          {/* hair pulled back */}
          <path d="M196 148 C 196 100 220 80 240 80 C 260 80 284 100 284 148 L 196 148 Z" fill="#2A1A0F"/>
          <path d="M218 175 q 6 -3 12 0" stroke="#1A0F08" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <path d="M248 175 q 6 -3 12 0" stroke="#1A0F08" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          <path d="M229 198 q 11 6 22 0" stroke="#1A0F08" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          {/* caring hand on shoulder — abstract */}
          <path d="M150 280 C 130 270 110 285 110 305 C 110 320 130 325 145 320" fill="none" stroke={SKIN_MID} strokeWidth="14" strokeLinecap="round"/>
        </g>
      </g>
    ),
    'ateliers': (
      <g>
        {/* table / surface */}
        <rect x="40" y="320" width="320" height="14" rx="4" fill="#8A7763" opacity="0.4"/>
        {/* three small figures around a table */}
        {[
          {x:90,  hair:'#1A0F08', skin:SKIN_DEEP, top:WRAP_A, hairType:'afro'},
          {x:200, hair:WRAP_A,    skin:SKIN_LIGHT, top:'#234862', hairType:'wrap'},
          {x:310, hair:'#1A0F08', skin:SKIN_MID,  top:WRAP_B, hairType:'short'},
        ].map((f, i) => (
          <g key={i} transform={`translate(${f.x - 50} 130)`}>
            <path d="M0 200 C 0 130 30 110 60 110 C 90 110 120 130 120 200 Z" fill={f.top}/>
            <ellipse cx="60" cy="90" rx="38" ry="46" fill={f.skin}/>
            {f.hairType === 'afro' && <ellipse cx="60" cy="55" rx="48" ry="32" fill={f.hair}/>}
            {f.hairType === 'wrap' && <path d="M22 70 C 22 30 38 18 60 18 C 82 18 98 30 98 70 Z" fill={f.hair}/>}
            {f.hairType === 'short' && <path d="M22 75 C 22 40 38 30 60 30 C 82 30 98 40 98 75 C 98 60 82 55 60 55 C 38 55 22 60 22 75 Z" fill={f.hair}/>}
            <path d="M44 95 q 5 -3 10 0" stroke="#1A0F08" strokeWidth="2" fill="none" strokeLinecap="round"/>
            <path d="M66 95 q 5 -3 10 0" stroke="#1A0F08" strokeWidth="2" fill="none" strokeLinecap="round"/>
            <path d="M52 113 q 8 5 16 0" stroke="#1A0F08" strokeWidth="2" fill="none" strokeLinecap="round"/>
          </g>
        ))}
      </g>
    ),
  };
  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMax slice" style={{width:'100%', height:'100%', display:'block'}}>
      <rect width="400" height="400" fill={bg}/>
      {/* soft sun / halo */}
      <circle cx="320" cy="80" r="44" fill={WRAP_B} opacity="0.22"/>
      <circle cx="60" cy="90" r="28" fill={WRAP_A} opacity="0.18"/>
      {figures[kind] || figures['elder-woman']}
    </svg>
  );
}

// Convert a Silhouette to a data URL (for use as <image-slot src>)
function silhouetteDataUrl(kind, bg) {
  const tmpDiv = document.createElement('div');
  ReactDOM.createRoot(tmpDiv).render(<Silhouette kind={kind} bg={bg}/>);
  // We can't easily serialize React-rendered SVG synchronously; instead
  // render the SVG markup directly with a string builder. Use a manual
  // approach.
  return null; // not used — we render <Silhouette> as the visible background instead
}

// ─── PhotoSlot — drop-zone with silhouette placeholder ──────────────────
// Renders the Silhouette underneath; layers an <image-slot> on top with a
// transparent placeholder so when the user drops a real photo it covers
// the silhouette cleanly.
function PhotoSlot({ slotId, kind = 'elder-woman', ratio = '4/3', label, tone = 'gold', style, radius = 18 }) {
  const tones = {
    gold:       '#F8E9B8',
    blue:       '#CFE0EA',
    terracotta: '#F0CFBE',
    paper:      '#F8F1E1',
  };
  const bg = tones[tone] || tones.gold;
  return (
    <div style={{
      position:'relative', aspectRatio: ratio, borderRadius: radius,
      overflow:'hidden', background: bg, ...style,
    }}>
      {/* silhouette fallback */}
      <div style={{position:'absolute', inset:0}}>
        <Silhouette kind={kind} bg={bg}/>
      </div>
      {/* image-slot overlay — fills entire tile */}
      {slotId && (
        <image-slot
          id={slotId}
          src={`/photos/${slotId}.jpg`}
          shape="rect"
          fit="cover"
          placeholder="Glisser une photo ici"
          style={{position:'absolute', inset:0, width:'100%', height:'100%', background:'transparent'}}
        />
      )}
      {label && (
        <div style={{
          position:'absolute', left:14, bottom:12, fontSize:11, fontWeight:600,
          letterSpacing:'.08em', textTransform:'uppercase',
          background:'rgba(255,253,247,.85)', padding:'5px 9px', borderRadius:6,
          backdropFilter:'blur(4px)', color:'#1A1410', pointerEvents:'none', zIndex:2,
        }}>{label}</div>
      )}
    </div>
  );
}

// ─── Instagram-style tile ────────────────────────────────────────────────
function InstaTile({ slotId, kind, caption, date, postType = 'photo', tag }) {
  return (
    <div style={{ position:'relative' }}>
      <PhotoSlot slotId={slotId} kind={kind} ratio="1/1" radius={14}/>
      <div style={{
        position:'absolute', top:10, left:12, display:'flex', gap:6, alignItems:'center',
        background:'rgba(255,253,247,.88)', padding:'4px 8px', borderRadius:99, fontSize:11, fontWeight:600,
        color:'#1A1410', zIndex:3, pointerEvents:'none',
      }}>
        <Icon name="insta" size={12} color="#C25A30"/> {tag || '@aliadassociation'}
      </div>
      {postType === 'video' && (
        <div style={{position:'absolute', top:10, right:12, background:'rgba(0,0,0,.6)',
          color:'#fff', padding:'4px 8px', borderRadius:99, fontSize:11, fontWeight:600,
          display:'flex', alignItems:'center', gap:4, zIndex:3, pointerEvents:'none'}}>
          <Icon name="play" size={11} color="#fff"/> Reel
        </div>
      )}
      <div style={{position:'absolute', left:14, bottom:14, right:14, zIndex:3, pointerEvents:'none'}}>
        <div className="serif" style={{
          fontSize:18, lineHeight:1.2, color:'#1A1410',
          background:'rgba(255,253,247,.88)', padding:'8px 10px', borderRadius:8,
          backdropFilter:'blur(4px)',
        }}>{caption}</div>
        <div style={{fontSize:11, color:'#fff', marginTop:6, fontWeight:600, textShadow:'0 1px 2px rgba(0,0,0,.6)'}}>{date}</div>
      </div>
    </div>
  );
}

Object.assign(window, { Logo, LogoMark, Icon, InstaTile, DotsField, PhotoSlot, Silhouette });
