/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, AppWindow, SB_EASE */
// Influencer solutions page — hero: the grind, answered. Board: a week already made.
const { useState: inS, useEffect: inE } = React;
const IN_QUEUE = [
  { src: GENS[7].src, p: 'Instagram', c: '#E1306C', time: 'Mon · 9:00 AM', st: 'Posted' },
  { src: GENS[1].src, p: 'TikTok', c: '#1C1B1B', time: 'Tue · 12:30 PM', st: 'Posted' },
  { src: GENS[3].src, p: 'Fanvue', c: '#1FB85A', time: 'Wed · 6:00 PM', st: 'Queued' },
  { src: GENS[0].src, p: 'Instagram', c: '#E1306C', time: 'Thu · 9:00 AM', st: 'Queued' },
  { src: GENS[5].src, p: 'TikTok', c: '#1C1B1B', time: 'Fri · 8:00 PM', st: 'Queued' }];

const INBoard = () => {
  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, already made</span>
            </span>
            <span style={{ whiteSpace: 'nowrap', 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' }}>Queued Sunday · 20 min</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
            {IN_QUEUE.map((r, i) =>
              <div key={r.time} 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: '7px 10px',
                opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(10px)', transition: `opacity 0.45s ${SB_EASE} ${i * 80}ms, transform 0.45s ${SB_EASE} ${i * 80}ms` }}>
                <span style={{ width: 34, height: 34, 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: 11.5, fontWeight: 700, color: INK }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: r.c }} />{r.p}</span>
                  <span style={{ display: 'block', fontSize: 9.5, color: 'rgba(28,27,27,0.5)', marginTop: 1 }}>{r.time}</span>
                </span>
                <span style={{ fontSize: 9, fontWeight: 700, borderRadius: 9999, padding: '3px 9px',
                  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={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, borderRadius: 12, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', padding: '9px 12px' }}>
            <span style={{ width: 22, height: 22, borderRadius: '50%', background: PULSE, display: 'grid', placeItems: 'center', fontSize: 10, color: '#fff', flexShrink: 0 }}>✦</span>
            <span style={{ fontSize: 10.5, fontWeight: 600, color: 'rgba(28,27,27,0.65)', flex: 1 }}>Copilot: “Want me to draft next week too?”</span>
            <span style={{ fontSize: 9.5, fontWeight: 800, letterSpacing: '0.05em', color: 'var(--brand-purple-700)', cursor: 'pointer', whiteSpace: 'nowrap' }}>YES, GO</span>
          </div>
        </div>
      </AppWindow>
    </div>);
};

const InfluencerHero = () => (
  <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 }}>Influencer</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' }}>
            The grind doesn’t scale.<br /><GradText>You do now.</GradText>
          </h1>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 30px', maxWidth: 430 }}>
            You’re posting daily across six platforms, and the feed never says thank you. Sozee shoots, edits, writes and queues as you — so the grind runs without you in it.
          </p>
        </Reveal>
        <Reveal delay={250}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <CTAButton>Get your week back</CTAButton>
          </div>
        </Reveal>
      </div>
      <Reveal delay={200} y={30}><INBoard /></Reveal>
    </div>
  </section>
);

Object.assign(window, { InfluencerHero });