/* Central Rewards Club — Earn (scan receipt) + Social Share & Earn. */

// Plausible Central purchases — a captured photo maps to one of these so each
// scan feels real. Points scale by the member's tier multiplier.
const SCAN_BUYS = [
  { label: 'Central GI', sub: 'Fashion Floor 2', amount: 1850000 },
  { label: 'Beauty Hall', sub: 'Kosmetik', amount: 640000 },
  { label: 'The Café', sub: 'F&B', amount: 185000 },
  { label: 'Sport Station', sub: 'Sneakers', amount: 1290000 },
  { label: 'Electronic City', sub: 'Gadget', amount: 2450000 },
  { label: 'Home Living', sub: 'Dekorasi', amount: 920000 },
];

function EarnScreen({ ctx }) {
  const [phase, setPhase] = React.useState('idle'); // idle | live | scanning | result
  const [scan, setScan] = React.useState(null);
  const [camErr, setCamErr] = React.useState('');
  const videoRef = React.useRef(null);
  const fileRef = React.useRef(null);
  const streamRef = React.useRef(null);

  const recent = [
    { id: 1, label: 'Central GI · Fashion', amt: 1850000, pts: 2775, when: 'Hari ini' },
    { id: 2, label: 'Beauty Hall', amt: 640000, pts: 960, when: '5 hari lalu' },
  ];

  const stopCamera = () => {
    if (streamRef.current) { streamRef.current.getTracks().forEach((t) => t.stop()); streamRef.current = null; }
    if (videoRef.current) videoRef.current.srcObject = null;
  };
  React.useEffect(() => () => stopCamera(), []);

  // Attach the live stream once the <video> is mounted (phase === 'live').
  React.useEffect(() => {
    if (phase === 'live' && streamRef.current && videoRef.current) {
      videoRef.current.srcObject = streamRef.current;
      const p = videoRef.current.play();
      if (p && p.catch) p.catch(() => {});
    }
  }, [phase]);

  const startCamera = async () => {
    setCamErr('');
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      ctx.toast('Kamera tidak tersedia — pilih foto', 'info');
      return fileRef.current && fileRef.current.click();
    }
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: 'environment' } }, audio: false });
      streamRef.current = stream;
      setPhase('live');
    } catch (e) {
      setCamErr(e && e.name === 'NotAllowedError' ? 'Izin kamera ditolak' : 'Kamera tidak tersedia');
      ctx.toast('Tidak bisa akses kamera — pilih foto', 'info');
      fileRef.current && fileRef.current.click();
    }
  };

  // Any captured photo earns points — random plausible purchase × tier multiplier.
  const finishScan = (src) => {
    stopCamera();
    const buy = SCAN_BUYS[Math.floor(Math.random() * SCAN_BUYS.length)];
    const mult = parseFloat(String(ctx.tierObj.mult)) || 1;
    // Earn rate: 1 poin per Rp 1.000, then × tier multiplier (matches seed data).
    const points = Math.round(buy.amount / 1000 * mult);
    setScan({ ...buy, points, mult, src });
    setPhase('scanning');
    setTimeout(() => setPhase('result'), 1700);
  };

  const capturePhoto = () => {
    const v = videoRef.current;
    if (!v || !v.videoWidth) return finishScan(null);
    const canvas = document.createElement('canvas');
    canvas.width = v.videoWidth; canvas.height = v.videoHeight;
    canvas.getContext('2d').drawImage(v, 0, 0, canvas.width, canvas.height);
    let src = null; try { src = canvas.toDataURL('image/jpeg', 0.6); } catch (e) {}
    finishScan(src);
  };

  const onFile = (e) => {
    const f = e.target.files && e.target.files[0];
    e.target.value = '';
    if (!f) return;
    const r = new FileReader();
    r.onload = () => finishScan(r.result);
    r.readAsDataURL(f);
  };

  if (phase === 'result') {
    return <ScanResult ctx={ctx} scan={scan} onDone={() => { setScan(null); setPhase('idle'); }} />;
  }

  const live = phase === 'live';
  const scanning = phase === 'scanning';

  return (
    <div style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', background: '#15080b' }}>
      <input ref={fileRef} type="file" accept="image/*" capture="environment" onChange={onFile} style={{ display: 'none' }} />

      <div style={{ padding: '60px 20px 16px', color: '#fff' }}>
        <h1 style={{ margin: 0, fontSize: 23, fontWeight: 700 }}>Scan struk</h1>
        <p style={{ margin: '6px 0 0', fontSize: 14, color: 'rgba(255,255,255,.65)' }}>{live ? 'Posisikan struk di dalam bingkai, lalu ambil foto.' : 'Arahkan kamera ke struk belanja untuk kumpulkan poin otomatis.'}</p>
      </div>

      {/* Viewfinder */}
      <div style={{ margin: '8px 20px', flex: 1, borderRadius: 24, position: 'relative', overflow: 'hidden', background: 'linear-gradient(160deg,#2a1418,#1a0c0f)', minHeight: 330, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {live ? (
          <video ref={videoRef} autoPlay muted playsInline style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', background: '#000' }} />
        ) : scanning && scan && scan.src ? (
          <img src={scan.src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        ) : (
          <div style={{ width: 150, background: '#fff', borderRadius: 6, padding: '14px 12px', transform: 'rotate(-3deg)', boxShadow: '0 20px 50px rgba(0,0,0,.5)', opacity: scanning ? 1 : .92 }}>
            <div style={{ textAlign: 'center', fontWeight: 800, fontSize: 11, letterSpacing: '.1em', color: '#1A1A1A' }}>CENTRAL</div>
            <div style={{ textAlign: 'center', fontSize: 7, color: '#999', marginBottom: 8 }}>GRAND INDONESIA</div>
            {[60, 80, 45, 70, 55].map((w, i) => <div key={i} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}><div style={{ width: w + '%', height: 4, background: '#E0E0E0', borderRadius: 2 }} /><div style={{ width: 18, height: 4, background: '#E0E0E0', borderRadius: 2 }} /></div>)}
            <div style={{ borderTop: '1px dashed #CCC', margin: '8px 0', paddingTop: 6, display: 'flex', justifyContent: 'space-between' }}><div style={{ width: '40%', height: 6, background: '#7A1F2B', borderRadius: 2 }} /><div style={{ width: '30%', height: 6, background: '#7A1F2B', borderRadius: 2 }} /></div>
            <div style={{ marginTop: 8, height: 16, background: 'repeating-linear-gradient(90deg,#1A1A1A 0 2px,#fff 2px 4px)' }} />
          </div>
        )}
        {/* frame corners */}
        {[['top', 'left'], ['top', 'right'], ['bottom', 'left'], ['bottom', 'right']].map(([v, h], i) => (
          <div key={i} style={{ position: 'absolute', [v]: 26, [h]: 26, width: 34, height: 34, [`border${v[0].toUpperCase() + v.slice(1)}`]: '3px solid var(--crc-gold)', [`border${h[0].toUpperCase() + h.slice(1)}`]: '3px solid var(--crc-gold)', [`border${v === 'top' ? 'TopLeftRadius' : 'BottomLeftRadius'}`]: h === 'left' ? 10 : 0 }} />
        ))}
        {(live || scanning) && (
          <div style={{ position: 'absolute', left: 26, right: 26, height: 3, background: 'linear-gradient(90deg,transparent,var(--crc-gold),transparent)', boxShadow: '0 0 16px var(--crc-gold)', animation: 'crc-scan 1.4s ease-in-out infinite', top: '50%' }} />
        )}
        {scanning && <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,.35)' }} />}
        {(live || scanning) && (
          <div style={{ position: 'absolute', bottom: 18, left: 0, right: 0, textAlign: 'center', color: 'var(--crc-gold)', fontWeight: 600, fontSize: 13, textShadow: '0 1px 6px rgba(0,0,0,.6)' }}>{scanning ? 'Membaca struk…' : 'Kamera aktif'}</div>
        )}
        {live && <span style={{ position: 'absolute', top: 16, left: 16, display: 'flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 999, background: 'rgba(0,0,0,.45)', color: '#fff', fontSize: 11, fontWeight: 700 }}><span style={{ width: 7, height: 7, borderRadius: '50%', background: '#ff5b5b' }} />LIVE</span>}
      </div>

      <div style={{ padding: '8px 20px 30px' }}>
        {phase === 'idle' && (
          <React.Fragment>
            <CRCButton variant="gold" size="lg" icon="camera" full onClick={startCamera}>Mulai scan</CRCButton>
            <div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
              <button onClick={() => fileRef.current && fileRef.current.click()} style={ghostScanBtn}><CRCIcon name="store" size={17} /> Pilih foto</button>
              <button onClick={() => ctx.openSheet(<ManualEntry ctx={ctx} />)} style={ghostScanBtn}><CRCIcon name="edit" size={16} /> Input manual</button>
            </div>
            {camErr && <div style={{ marginTop: 12, textAlign: 'center', color: 'rgba(255,255,255,.6)', fontSize: 12.5 }}>{camErr} · gunakan "Pilih foto"</div>}
          </React.Fragment>
        )}
        {live && (
          <React.Fragment>
            <CRCButton variant="gold" size="lg" icon="camera" full onClick={capturePhoto}>Ambil foto & proses</CRCButton>
            <button onClick={() => { stopCamera(); setPhase('idle'); }} style={{ display: 'block', width: '100%', marginTop: 12, background: 'none', border: 'none', color: 'rgba(255,255,255,.75)', fontWeight: 600, fontSize: 14, fontFamily: 'var(--crc-font)', cursor: 'pointer' }}>Batalkan</button>
          </React.Fragment>
        )}
        {scanning && <CRCButton variant="outline" size="lg" full disabled>Memproses…</CRCButton>}
      </div>

      {/* Recent scans */}
      {phase === 'idle' && (
        <div style={{ background: 'var(--crc-bg)', borderRadius: '24px 24px 0 0', padding: '20px 20px 30px' }}>
          <SectionHead title="Scan terakhir" action="Riwayat" onAction={() => ctx.push('history')} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {recent.map((r) => (
              <Surface key={r.id} pad={14} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 42, height: 42, borderRadius: 12, background: 'var(--crc-success-soft)', color: 'var(--crc-success)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CRCIcon name="store" size={20} /></span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{r.label}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--crc-ink-2)' }}>{ctx.fmt.idr(r.amt)} · {r.when}</div>
                </div>
                <span style={{ color: 'var(--crc-success)', fontWeight: 700, fontSize: 14 }}>+{ctx.fmt.pts(r.pts)}</span>
              </Surface>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

const ghostScanBtn = {
  flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
  padding: '12px', borderRadius: 14, border: '1px solid rgba(255,255,255,.18)',
  background: 'rgba(255,255,255,.06)', color: 'rgba(255,255,255,.9)', fontWeight: 600,
  fontSize: 13.5, fontFamily: 'var(--crc-font)', cursor: 'pointer',
};

function ManualEntry({ ctx }) {
  return (
    <div style={{ padding: '8px 20px 30px' }}>
      <h2 style={{ margin: '4px 0 4px', fontSize: 19, fontWeight: 700 }}>Input struk manual</h2>
      <p style={{ margin: '0 0 18px', fontSize: 13.5, color: 'var(--crc-ink-2)' }}>Masukkan nomor struk yang tertera di bagian bawah.</p>
      <label style={{ display: 'block', fontSize: 13, fontWeight: 600, color: 'var(--crc-ink-2)', marginBottom: 6 }}>Nomor struk</label>
      <input defaultValue="GI-2026-0608-1142" style={{ width: '100%', height: 52, padding: '0 16px', fontSize: 16, fontWeight: 600, fontFamily: 'var(--crc-font)', borderRadius: 14, border: 'none', outline: 'none', background: '#fff', boxShadow: 'inset 0 0 0 1.5px var(--crc-line)', boxSizing: 'border-box' }} />
      <div style={{ marginTop: 20 }}><CRCButton variant="primary" size="lg" full onClick={() => { ctx.closeSheet(); ctx.toast('Struk dikirim untuk diproses', 'success'); }}>Kirim</CRCButton></div>
    </div>
  );
}

function ScanResult({ ctx, scan, onDone }) {
  const data = scan || { label: 'Central GI', sub: 'Fashion Floor 2', amount: 1850000, points: 2775, mult: parseFloat(String(ctx.tierObj.mult)) || 1, src: null };
  const target = data.points;
  const claimedRef = React.useRef(false);
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    let raf; const t0 = performance.now(); const dur = 900;
    const tick = (t) => { const p = Math.min(1, (t - t0) / dur); setCount(Math.round(target * (1 - Math.pow(1 - p, 3)))); if (p < 1) raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf);
  }, []);
  // Credit the points exactly once, when the result appears.
  const claim = (share) => {
    if (!claimedRef.current) { ctx.actions.earnPurchase({ amount: data.amount, points: target, label: data.label, sub: data.sub }); ctx.celebrate(); claimedRef.current = true; }
    onDone();
    if (share) ctx.push('social');
  };
  return (
    <div style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', background: 'radial-gradient(120% 60% at 50% 0%,#2E8B57 0%,#1f5e3b 100%)', color: '#fff', position: 'relative' }}>
      <Confetti show={true} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '40px 28px' }}>
        <div style={{ width: 86, height: 86, borderRadius: '50%', background: 'rgba(255,255,255,.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', animation: 'crc-pop .45s' }}>
          <div style={{ width: 62, height: 62, borderRadius: '50%', background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CRCIcon name="check" size={36} color="var(--crc-success)" stroke={3} /></div>
        </div>
        <p style={{ margin: '24px 0 4px', fontSize: 14, fontWeight: 600, letterSpacing: '.1em', opacity: .85 }}>POIN BERHASIL DITAMBAHKAN</p>
        <div className="crc-display" style={{ fontSize: 60, fontWeight: 800, lineHeight: 1 }}>+{ctx.fmt.pts(count)}</div>
        <div style={{ marginTop: 16, background: 'rgba(255,255,255,.14)', borderRadius: 16, padding: '14px 16px', width: '100%', maxWidth: 320, display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 48, height: 60, borderRadius: 10, overflow: 'hidden', flexShrink: 0, background: 'rgba(255,255,255,.16)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {data.src ? <img src={data.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <CRCIcon name="store" size={22} color="#fff" />}
          </div>
          <div style={{ flex: 1, textAlign: 'left' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13.5 }}><span style={{ opacity: .8 }}>{data.label} · {data.sub}</span><b>{ctx.fmt.idr(data.amount)}</b></div>
            <div style={{ height: 1, background: 'rgba(255,255,255,.18)', margin: '9px 0' }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13.5 }}><span style={{ opacity: .8 }}>Poin ({ctx.tierObj.name} {ctx.tierObj.mult})</span><b>+{ctx.fmt.pts(target)}</b></div>
          </div>
        </div>
      </div>
      {/* Social prompt */}
      <div style={{ background: 'var(--crc-bg)', borderRadius: '24px 24px 0 0', padding: '22px 20px 30px', color: 'var(--crc-ink)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 11, marginBottom: 14 }}>
          <span style={{ width: 44, height: 44, borderRadius: 13, background: 'var(--crc-coral-soft)', color: 'var(--crc-coral)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CRCIcon name="instagram" size={22} /></span>
          <div><div style={{ fontWeight: 700, fontSize: 15 }}>Bagikan untuk bonus +150 poin</div><div style={{ fontSize: 12.5, color: 'var(--crc-ink-2)' }}>Posting look belanjamu & tag Central</div></div>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <CRCButton variant="outline" size="md" full onClick={() => claim(false)}>Nanti saja</CRCButton>
          <CRCButton variant="primary" size="md" icon="share" full onClick={() => claim(true)}>Bagikan</CRCButton>
        </div>
      </div>
    </div>
  );
}

// ── Social Share & Earn (pushed screen) ──
function Social({ ctx }) {
  const C = ctx.C;
  const [tab, setTab] = React.useState('misi');
  return (
    <div style={{ paddingBottom: 24 }}>
      <div style={{ background: 'linear-gradient(150deg,#FF6B5B,#e0432f)', color: '#fff', padding: '58px 20px 22px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><CRCIcon name="sparkle" size={20} /><span style={{ fontWeight: 700, fontSize: 13, letterSpacing: '.05em' }}>SHARE & EARN</span></div>
        <h1 style={{ margin: '10px 0 4px', fontSize: 24, fontWeight: 800, letterSpacing: '-0.02em' }}>Dapat poin dari sosial</h1>
        <p style={{ margin: 0, fontSize: 14, color: 'rgba(255,255,255,.85)', lineHeight: 1.5 }}>Bagikan momenmu, ajak teman, dan tulis ulasan untuk poin tambahan.</p>
        <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
          {[{ k: 'instagram', l: 'Instagram', h: '@rezapratama', c: true }, { k: 'video', l: 'TikTok', h: 'Hubungkan', c: false }].map((a) => (
            <div key={a.k} style={{ flex: 1, background: 'rgba(255,255,255,.16)', borderRadius: 14, padding: '12px 13px', display: 'flex', alignItems: 'center', gap: 9 }}>
              <CRCIcon name={a.k} size={20} />
              <div style={{ minWidth: 0 }}><div style={{ fontSize: 12.5, fontWeight: 700 }}>{a.l}</div><div style={{ fontSize: 11, color: 'rgba(255,255,255,.8)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{a.c ? a.h : <u>{a.h}</u>}</div></div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: 'flex', gap: 8, padding: '16px 20px 4px' }}>
        {[['misi', 'Misi'], ['riwayat', 'Riwayat']].map(([k, l]) => (
          <Chip key={k} label={l} active={tab === k} onClick={() => setTab(k)} />
        ))}
      </div>

      {tab === 'misi' ? (
        <div style={{ padding: '12px 20px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {C.missions.map((m) => (
            <Surface key={m.id} pad={16} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <span style={{ width: 48, height: 48, borderRadius: 14, background: m.kind === 'social' ? 'var(--crc-coral-soft)' : m.kind === 'referral' ? 'var(--crc-gold-soft)' : 'var(--crc-primary-soft)', color: m.kind === 'social' ? 'var(--crc-coral)' : m.kind === 'referral' ? 'var(--crc-gold-deep)' : 'var(--crc-primary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><CRCIcon name={m.icon} size={23} stroke={2} /></span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 600, fontSize: 14.5 }}>{m.title}</div>
                <div style={{ fontSize: 12.5, color: 'var(--crc-ink-2)' }}>{m.sub}</div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 3, marginTop: 7, color: 'var(--crc-gold-deep)', fontWeight: 700, fontSize: 13 }}><CRCIcon name="sparkle" size={14} />+{m.points} poin</div>
              </div>
              <CRCButton variant="primary" size="sm" onClick={() => ctx.openSheet(<ShareSheet ctx={ctx} mission={m} />)}>{m.cta}</CRCButton>
            </Surface>
          ))}
        </div>
      ) : (
        <div style={{ padding: '12px 20px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {ctx.store.socialHistory.length === 0 && <EmptyState icon="sparkle" title="Belum ada aktivitas" sub="Selesaikan misi untuk mulai kumpulkan poin sosial." />}
          {ctx.store.socialHistory.map((s) => {
            const ok = s.status === 'approved';
            return (
              <Surface key={s.id} pad={14} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 42, height: 42, borderRadius: 12, background: s.platform === 'instagram' ? 'var(--crc-coral-soft)' : '#EAF1FB', color: s.platform === 'instagram' ? 'var(--crc-coral)' : 'var(--crc-info)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CRCIcon name={s.platform === 'instagram' ? 'instagram' : 'video'} size={20} /></span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{s.label}</div>
                  <div style={{ fontSize: 12, color: 'var(--crc-ink-2)' }}>{s.when}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ color: ok ? 'var(--crc-success)' : 'var(--crc-warning)', fontWeight: 700, fontSize: 13 }}>+{s.points}</div>
                  <div style={{ fontSize: 10.5, fontWeight: 600, color: ok ? 'var(--crc-success)' : 'var(--crc-warning)' }}>{ok ? 'Disetujui' : 'Ditinjau'}</div>
                </div>
              </Surface>
            );
          })}
        </div>
      )}
    </div>
  );
}

function ShareSheet({ ctx, mission }) {
  const [stage, setStage] = React.useState('compose'); // compose | submitted
  if (stage === 'submitted') {
    return (
      <div style={{ padding: '20px 24px 34px', textAlign: 'center' }}>
        <div style={{ width: 72, height: 72, borderRadius: '50%', margin: '8px auto 0', background: 'var(--crc-success-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><CRCIcon name="check" size={36} color="var(--crc-success)" stroke={3} /></div>
        <h2 style={{ margin: '18px 0 6px', fontSize: 20, fontWeight: 700 }}>Postingan dikirim!</h2>
        <p style={{ margin: '0 0 6px', fontSize: 14, color: 'var(--crc-ink-2)', lineHeight: 1.5 }}>Kami beri <b style={{ color: 'var(--crc-gold-deep)' }}>+{mission.points} poin sementara</b>. Verifikasi selesai dalam 24 jam.</p>
        <div style={{ marginTop: 20 }}><CRCButton variant="primary" size="lg" full onClick={() => { ctx.actions.submitSocial(mission); ctx.celebrate(); ctx.closeSheet(); }}>Selesai</CRCButton></div>
      </div>
    );
  }
  return (
    <div style={{ padding: '8px 20px 30px' }}>
      <h2 style={{ margin: '4px 0 4px', fontSize: 19, fontWeight: 700 }}>{mission.title}</h2>
      <p style={{ margin: '0 0 16px', fontSize: 13.5, color: 'var(--crc-ink-2)' }}>{mission.sub} · <b style={{ color: 'var(--crc-gold-deep)' }}>+{mission.points} poin</b></p>
      <div style={{ borderRadius: 16, overflow: 'hidden', height: 180, boxShadow: 'var(--crc-sh-sm)' }}><Img slot="share-content" placeholder="Pilih foto / konten untuk dibagikan" radius={0} /></div>
      <div style={{ display: 'flex', gap: 10, margin: '14px 0 4px' }}>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, padding: '12px 14px', background: '#fff', borderRadius: 12, boxShadow: 'inset 0 0 0 1.5px var(--crc-line)', fontWeight: 600, fontSize: 13.5 }}><CRCIcon name="instagram" size={18} color="var(--crc-coral)" />Instagram</div>
        <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8, padding: '12px 14px', background: '#fff', borderRadius: 12, boxShadow: 'inset 0 0 0 1.5px var(--crc-line)', fontWeight: 600, fontSize: 13.5 }}><CRCIcon name="video" size={18} color="var(--crc-info)" />TikTok</div>
      </div>
      <div style={{ fontSize: 12, color: 'var(--crc-ink-2)', display: 'flex', gap: 6, alignItems: 'center', margin: '12px 0 18px' }}><CRCIcon name="info" size={15} />Sertakan tag <b style={{ color: 'var(--crc-ink)' }}>@centraldept</b> dan <b style={{ color: 'var(--crc-ink)' }}>#CentralRewards</b>.</div>
      <CRCButton variant="primary" size="lg" icon="share" full onClick={() => setStage('submitted')}>Bagikan & klaim poin</CRCButton>
    </div>
  );
}

Object.assign(window, { EarnScreen, Social, ShareSheet });