/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, AppWindow, SB_EASE */
// Micro-Creator solutions page — hero: copy left, first-30-days momentum board right.
const MC_FILLED = [0, 1, 2, 4, 5, 7, 8, 9, 11, 12, 14, 15, 16, 17, 18, 19, 21, 22]; // posted days
const MC_THUMBS = { 2: GENS[7].src, 9: GENS[1].src, 16: GENS[3].src, 22: GENS[0].src };

const MCBoard = () => {
  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: 13 }}>
            <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 }}>Your first 30 days</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' }}>18-day streak</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6, marginBottom: 13 }}>
            {Array.from({ length: 28 }, (_, i) => {
              const posted = MC_FILLED.includes(i);
              const thumb = MC_THUMBS[i];
              return (
                <div key={i} style={{ position: 'relative', aspectRatio: '1', borderRadius: 9, overflow: 'hidden',
                  background: posted ? (thumb ? '#eee' : 'var(--brand-purple-50)') : 'rgb(250,247,247)',
                  boxShadow: posted ? 'inset 0 0 0 1.5px var(--brand-purple-300)' : 'inset 0 0 0 1px rgba(28,27,27,0.07)',
                  opacity: on ? 1 : 0, transition: `opacity 0.35s ${SB_EASE} ${i * 22}ms` }}>
                  {thumb && <img loading="lazy" decoding="async" src={thumb} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%' }} />}
                  {posted && !thumb && <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
                    <svg width="11" height="11" viewBox="0 0 16 16" fill="none"><path d="M3 8.4l3.2 3.2L13.5 4" stroke="var(--brand-purple-600)" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" /></svg></span>}
                  {!posted && <span style={{ position: 'absolute', left: 5, top: 4, fontSize: 8, fontWeight: 700, color: 'rgba(28,27,27,0.3)' }}>{i + 1}</span>}
                </div>);
            })}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 9 }}>
            <div style={{ borderRadius: 12, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', padding: '11px 13px' }}>
              <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 4 }}>New followers</div>
              <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-0.02em', color: INK }}>+847 <span style={{ fontSize: 10, fontWeight: 700, color: '#15803D' }}>▲ this month</span></div>
            </div>
            <div style={{ borderRadius: 12, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', padding: '11px 13px' }}>
              <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 4 }}>Time spent</div>
              <div style={{ fontSize: 19, fontWeight: 800, letterSpacing: '-0.02em', color: INK }}>~20 min <span style={{ fontSize: 10, fontWeight: 700, color: 'rgba(28,27,27,0.45)' }}>a week</span></div>
            </div>
          </div>
        </div>
      </AppWindow>
    </div>);
};

const MicroCreatorHero = () => (
  <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 }}>Micro-Creator</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' }}>
            Grow like it’s your job.<br /><GradText>Before it is.</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 building a following in the hours after work — no gear, no team, no budget. Sozee gives you a big account’s output from three phone photos and twenty minutes a week.
          </p>
        </Reveal>
        <Reveal delay={250}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <CTAButton>Start free — no card</CTAButton>
          </div>
        </Reveal>
      </div>
      <Reveal delay={200} y={30}><MCBoard /></Reveal>
    </div>
  </section>
);

Object.assign(window, { MicroCreatorHero });