/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, AppWindow, SB_EASE */
// UGC Campaigns solutions page — hero: copy left, campaign deliverables board right.
const UGC_ROWS = [
  { g: GENS[0], n: 'Scarlett', p: 'IG Reel', s: 'posted', v: '412k views' },
  { g: GENS[5], n: 'Nova', p: 'TikTok', s: 'scheduled', v: 'Fri · 9:00 PM' },
  { g: GENS[6], n: 'Mara', p: 'IG Story', s: 'studio', v: 'draft ready' },
  { g: GENS[3], n: 'Jade', p: 'TikTok', s: 'nudged', v: 'due in 2 days' }];

const UGCStatus = ({ s }) => {
  const map = {
    posted: ['✓ Posted · verified', '#15803D', 'rgba(34,197,94,0.12)', 'rgba(34,197,94,0.3)'],
    scheduled: ['⏱ Scheduled', '#4D73F2', 'rgba(77,115,242,0.1)', 'rgba(77,115,242,0.3)'],
    studio: ['✎ In studio', 'var(--brand-purple-700)', 'var(--brand-purple-50)', 'var(--brand-purple-200)'],
    nudged: ['Auto-nudge sent', '#B45309', 'rgba(245,165,36,0.14)', 'rgba(245,165,36,0.4)'] };
  const [t, c, bg, bd] = map[s];
  return <span style={{ fontSize: 9, fontWeight: 700, color: c, background: bg, border: `1px solid ${bd}`, borderRadius: 9999, padding: '3px 9px', whiteSpace: 'nowrap' }}>{t}</span>;
};

const UGCBoard = () => {
  const [ref, on] = useReveal(0.3);
  return (
    <div ref={ref} style={{ transform: 'rotate(1.4deg) perspective(1400px) rotateY(-4deg)', transformOrigin: 'center' }}>
      <AppWindow>
        <div style={{ padding: '18px 20px 20px' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 24, height: 24, borderRadius: 7, background: INK, display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 800, color: '#fff' }}>A</span>
              <span style={{ fontSize: 13, fontWeight: 800, color: INK }}>Velvet Drop <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--brand-purple-700)' }}>· UGC campaign</span></span>
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 9.5, fontWeight: 700, color: '#15803D', background: 'rgba(34,197,94,0.12)', border: '1px solid rgba(34,197,94,0.3)', borderRadius: 9999, padding: '3px 10px' }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#22C55E', animation: 'sz-pulse-dot 1.6s infinite' }} />Live</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginBottom: 10 }}>
            {[['Creators', '12'], ['Posts live', '28 / 34'], ['Views', '2.1M']].map(([l, v]) =>
              <div key={l} style={{ borderRadius: 12, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '10px 12px' }}>
                <div style={{ fontSize: 8.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 4 }}>{l}</div>
                <div style={{ fontSize: 17, fontWeight: 800, letterSpacing: '-0.02em', color: INK }}>{v}</div>
              </div>)}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {UGC_ROWS.map((r, i) =>
              <div key={r.n} style={{ display: 'flex', alignItems: 'center', gap: 9, borderRadius: 11, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', padding: '7px 10px',
                opacity: on ? 1 : 0, transition: `opacity 0.45s ${SB_EASE} ${180 + i * 90}ms` }}>
                <span style={{ width: 28, height: 28, borderRadius: '50%', overflow: 'hidden', flexShrink: 0 }}>
                  <img loading="lazy" decoding="async" src={r.g.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%' }} /></span>
                <span style={{ flex: 1, minWidth: 0 }}>
                  <span style={{ display: 'block', fontSize: 11.5, fontWeight: 700, color: INK }}>{r.n}</span>
                  <span style={{ display: 'block', fontSize: 9, fontWeight: 600, color: 'rgba(28,27,27,0.45)' }}>{r.p} · {r.v}</span>
                </span>
                <UGCStatus s={r.s} />
              </div>)}
          </div>
          <div style={{ marginTop: 10, fontSize: 10, fontWeight: 600, color: 'var(--text-tertiary)', textAlign: 'center' }}>Posts publish through Sozee — “posted” is a fact, not a screenshot.</div>
        </div>
      </AppWindow>
    </div>);
};

const UGCHero = () => (
  <section style={{ background: CREAM, padding: '0 0 100px' }}>
    <div style={{ maxWidth: 1180, margin: '0 auto', padding: '140px 56px 0', display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 60, alignItems: 'center' }}>
      <div>
        <Reveal>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 20, borderRadius: 9999, padding: '7px 14px', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
            <a href="/" style={{ fontSize: 11.5, fontWeight: 600, color: 'rgba(28,27,27,0.55)' }}>Solutions</a>
            <span style={{ fontSize: 11, color: 'rgba(28,27,27,0.35)' }}>/</span>
            <span style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>UGC Campaigns</span>
          </div>
        </Reveal>
        <Reveal delay={90}>
          <h1 style={{ font: '800 62px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 20px', textWrap: 'balance' }}>
            UGC at scale,<br /><GradText>without the chase.</GradText>
          </h1>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 30px', maxWidth: 430 }}>
            Brief once. Your products land in every creator’s studio, posts verify themselves the moment they publish, and payouts release on proof — not promises.
          </p>
        </Reveal>
        <Reveal delay={250}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <CTAButton>Launch a campaign</CTAButton>
          </div>
        </Reveal>
        <Reveal delay={330}>
          <div style={{ marginTop: 26, fontSize: 13, color: 'var(--text-tertiary)' }}>No samples shipped · no screenshot reporting · no invoice pile.</div>
        </Reveal>
      </div>
      <Reveal delay={200} y={30}><UGCBoard /></Reveal>
    </div>
  </section>
);

Object.assign(window, { UGCHero, UGCStatus });