/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, AppWindow, SB_EASE */
// Post & Analyze feature page — hero: copy left, queue + numbers board right.
const PA_ACCENTS = { Scheduler: '#4D73F2', Platforms: '#C77D3A', Analytics: '#3A8F6B', Receipts: '#B0489B' };
const PA_QUEUE = [
  { src: GENS[7].src, p: 'Instagram', c: '#E1306C', time: 'Today · 9:00 AM', st: 'Queued' },
  { src: GENS[1].src, p: 'TikTok', c: '#1C1B1B', time: 'Today · 12:30 PM', st: 'Queued' },
  { src: GENS[3].src, p: 'Fanvue', c: '#1FB85A', time: 'Yesterday · 6:00 PM', st: 'Posted' }];
const PA_BARS = [34, 52, 41, 68, 55, 88, 62];

const PABoard = () => {
  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: 22, height: 22, borderRadius: '50%', backgroundImage: `url(${GENS[0].src})`, backgroundSize: 'cover', backgroundPosition: 'center 15%' }} />
              <span style={{ fontSize: 13, fontWeight: 800, color: INK }}>This week · Scarlett</span>
            </span>
            <span style={{ fontSize: 10, fontWeight: 700, color: 'var(--brand-purple-700)', background: 'var(--brand-purple-50)', border: '1px solid var(--brand-purple-200)', borderRadius: 9999, padding: '3px 10px' }}>6 platforms</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 7, marginBottom: 14 }}>
            {PA_QUEUE.map((r, i) =>
              <div key={r.p} style={{ display: 'flex', alignItems: 'center', gap: 10, borderRadius: 12, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '8px 10px',
                opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(10px)', transition: `opacity 0.45s ${SB_EASE} ${i * 90}ms, transform 0.45s ${SB_EASE} ${i * 90}ms` }}>
                <span style={{ width: 36, height: 36, borderRadius: 9, overflow: 'hidden', flexShrink: 0 }}>
                  <img loading="lazy" decoding="async" src={r.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 18%' }} /></span>
                <span style={{ flex: 1, minWidth: 0 }}>
                  <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, fontWeight: 700, color: INK }}>
                    <span style={{ width: 7, height: 7, borderRadius: '50%', background: r.c }} />{r.p}</span>
                  <span style={{ display: 'block', fontSize: 10, color: 'rgba(28,27,27,0.5)', marginTop: 1 }}>{r.time}</span>
                </span>
                <span style={{ fontSize: 9.5, fontWeight: 700, borderRadius: 9999, padding: '3px 10px',
                  color: r.st === 'Posted' ? '#15803D' : 'var(--brand-purple-700)',
                  background: r.st === 'Posted' ? 'rgba(34,197,94,0.12)' : 'var(--brand-purple-50)',
                  border: r.st === 'Posted' ? '1px solid rgba(34,197,94,0.3)' : '1px solid var(--brand-purple-200)' }}>{r.st}</span>
              </div>
            )}
          </div>
          <div style={{ borderRadius: 14, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', padding: '13px 15px' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 10 }}>
              <span style={{ fontSize: 10.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>Reach · last 7 days</span>
              <span style={{ fontSize: 15, fontWeight: 800, color: INK }}>2.4M <span style={{ fontSize: 10.5, fontWeight: 700, color: '#15803D' }}>▲ 18%</span></span>
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 6, height: 62 }}>
              {PA_BARS.map((h, i) =>
                <span key={i} style={{ flex: 1, borderRadius: 5, height: on ? `${h}%` : '8%', transition: `height 0.7s ${SB_EASE} ${200 + i * 60}ms`,
                  background: i === 5 ? PULSE : 'rgb(235,231,231)' }} />)}
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 10 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 9.5, fontWeight: 600, color: 'rgba(28,27,27,0.6)' }}>
                <span style={{ width: 7, height: 7, borderRadius: 2, background: PULSE }} />Posted by Sozee · 82%</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 9.5, fontWeight: 600, color: 'rgba(28,27,27,0.6)' }}>
                <span style={{ width: 7, height: 7, borderRadius: 2, background: 'rgb(213,208,208)' }} />Posted by you · 18%</span>
            </div>
          </div>
        </div>
      </AppWindow>
    </div>);
};

const PostAnalyzeHero = () => (
  <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)' }}>Features</a>
            <span style={{ fontSize: 11, color: 'rgba(28,27,27,0.35)' }}>/</span>
            <span style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>Post & Analyze</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' }}>
            Queue it once.<br /><GradText>Watch it work.</GradText>
          </h1>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 30px', maxWidth: 430 }}>
            One queue posts to six platforms while you make the next set — and every post comes back with numbers attached. Proof, not vibes.
          </p>
        </Reveal>
        <Reveal delay={250}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <CTAButton>Start posting</CTAButton>
          </div>
        </Reveal>
      </div>
      <Reveal delay={200} y={30}><PABoard /></Reveal>
    </div>
  </section>
);

Object.assign(window, { PostAnalyzeHero, PA_ACCENTS });