/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE,
   MShell, MHead */
// Micro-Creator solutions page — mobile layout (skews alternate right → left → right …).
const { useState: mmzS } = React;

// eyebrows are hero-only on mobile — keep the heading, drop the pill
const MMCBadgeHead = ({ title, sub }) => <MHead title={title} sub={sub} />;
const MMCCard = ({ lean = 'right', children, pad = 12 }) => (
  <div style={{ borderRadius: 18, background: '#fff', boxShadow: '0 12px 32px rgba(28,27,27,0.10), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: pad, marginTop: 26, textAlign: 'left',
    transform: lean === 'left' ? 'rotate(-1.2deg) perspective(1200px) rotateY(3deg)' : 'rotate(1.2deg) perspective(1200px) rotateY(-3deg)' }}>{children}</div>
);

// hero
const MMC_FILLED = [0, 1, 2, 4, 5, 7, 8, 9, 11, 12, 14, 15, 16, 17, 18, 19];
const MMC_THUMBS = { 2: GENS[7].src, 9: GENS[1].src, 16: GENS[3].src };

const MMCHero = () => {
  const [ref, on] = useReveal(0.25);
  return (
    <section style={{ background: CREAM, padding: '0 22px 56px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '16px 0 30px' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
          <img loading="lazy" decoding="async" src="assets/logo-icon.png" alt="" style={{ width: 19, height: 19, objectFit: 'contain' }} />
          <span style={{ fontSize: 16, fontWeight: 800, letterSpacing: '-0.03em', color: INK }}>sozee</span>
        </span>
      </div>
      <div style={{ textAlign: 'center' }}>
        <Reveal>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginBottom: 16, borderRadius: 9999, padding: '6px 12px', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
            <a href="/" style={{ fontSize: 10.5, fontWeight: 600, color: 'rgba(28,27,27,0.55)' }}>Solutions</a>
            <span style={{ fontSize: 10, color: 'rgba(28,27,27,0.35)' }}>/</span>
            <span style={{ fontSize: 10.5, fontWeight: 700, color: INK }}>Micro-Creator</span>
          </div>
        </Reveal>
        <Reveal delay={90}>
          <h1 style={{ font: '800 44px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 16px', textWrap: 'balance' }}>
            Grow like it’s your job.<br /><GradText>Before it is.</GradText>
          </h1>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 14.5, lineHeight: 1.58, color: 'var(--text-secondary)', margin: '0 0 24px' }}>
            No gear, no team, no budget — a big account’s output from three phone photos and twenty minutes a week.
          </p>
        </Reveal>
        <Reveal delay={250} style={{ marginBottom: 34 }}><CTAButton size="sm">Start free — no card</CTAButton></Reveal>
      </div>
      <Reveal delay={200} y={26}>
        <div ref={ref} style={{ transform: 'rotate(1.2deg) perspective(1200px) rotateY(-3deg)', borderRadius: 20, background: '#fff', boxShadow: '0 20px 44px rgba(28,27,27,0.12), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 12, textAlign: 'left' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 9 }}>
            <span style={{ fontSize: 11, fontWeight: 800, color: INK }}>Your first 30 days</span>
            <span style={{ fontSize: 8, fontWeight: 700, color: 'var(--brand-purple-700)', background: 'var(--brand-purple-50)', border: '1px solid var(--brand-purple-200)', borderRadius: 9999, padding: '2px 7px' }}>16-day streak</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, marginBottom: 9 }}>
            {Array.from({ length: 21 }, (_, i) => {
              const posted = MMC_FILLED.includes(i);
              const thumb = MMC_THUMBS[i];
              return (
                <div key={i} style={{ position: 'relative', aspectRatio: '1', borderRadius: 6, overflow: 'hidden',
                  background: posted ? (thumb ? '#eee' : 'var(--brand-purple-50)') : 'rgb(250,247,247)',
                  boxShadow: posted ? 'inset 0 0 0 1px 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 * 20}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="8" height="8" 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>}
                </div>);
            })}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 7 }}>
            <div style={{ borderRadius: 10, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', padding: '8px 10px' }}>
              <div style={{ fontSize: 7.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 3 }}>New followers</div>
              <div style={{ fontSize: 15, fontWeight: 800, color: INK }}>+847 <span style={{ fontSize: 8.5, fontWeight: 700, color: '#15803D' }}>▲</span></div>
            </div>
            <div style={{ borderRadius: 10, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', padding: '8px 10px' }}>
              <div style={{ fontSize: 7.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 3 }}>Time spent</div>
              <div style={{ fontSize: 15, fontWeight: 800, color: INK }}>~20 min <span style={{ fontSize: 8.5, fontWeight: 700, color: 'rgba(28,27,27,0.45)' }}>/wk</span></div>
            </div>
          </div>
        </div>
      </Reveal>
    </section>);
};

// § 01 what to post
const MMC_CONCEPTS = [
  { src: 'assets/explore/x23.webp', t: 'Poolside golden light', s: '3.8M' }, { src: 'assets/explore/x02.mp4', v: true, t: 'GRWM mirror fit', s: '1.4M' },
  { src: 'assets/explore/x21.webp', t: 'Golden hour balcony', s: '2.1M' }, { src: 'assets/explore/x13.mp4', v: true, t: 'Beach walk POV', s: '1.9M' }];

const MMCWhatToPost = () => {
  const [sel, setSel] = mmzS(0);
  return (
    <MShell bg="#fff">
      <MMCBadgeHead label="Micro-Creator · What to post" ac="#4D73F2" title={<span>Never stare at<br /><GradText>a blank feed.</GradText></span>}
        sub="Explore is a feed of concepts already performing — tap one, it prefills the composer as your Character." />
      <MMCCard lean="left">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 10 }}>
          {MMC_CONCEPTS.map((c, i) =>
            <div key={c.t} onClick={() => setSel(i)} style={{ cursor: 'pointer' }}>
              <div style={{ position: 'relative', borderRadius: 10, overflow: 'hidden', aspectRatio: '3/3.4',
                outline: sel === i ? '2px solid var(--brand-purple-500)' : '1px solid rgba(28,27,27,0.1)', outlineOffset: -1 }}>
                {c.v ?
                  <video src={c.src} autoPlay muted loop playsInline preload="metadata" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 16%' }} /> :
                  <img loading="lazy" decoding="async" src={c.src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 16%' }} />}
                {c.v && <span style={{ position: 'absolute', right: 5, bottom: 5, display: 'inline-flex', alignItems: 'center', gap: 2, borderRadius: 9999, padding: '2px 5px', background: 'rgba(28,27,27,0.55)', fontSize: 6.5, fontWeight: 700, color: '#fff' }}>
                  <svg width="4" height="5" viewBox="0 0 8 10" fill="#fff"><path d="M0 0l8 5-8 5z" /></svg>Video</span>}
                <span style={{ position: 'absolute', left: 5, bottom: 5, fontSize: 7.5, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', borderRadius: 9999, padding: '2px 6px' }}>{c.s} plays</span>
              </div>
              <div style={{ marginTop: 5, fontSize: 9.5, fontWeight: sel === i ? 800 : 600, color: sel === i ? INK : 'rgba(28,27,27,0.55)' }}>{c.t}</div>
            </div>)}
        </div>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          <div style={{ flex: 1, minWidth: 0, borderRadius: 10, background: 'rgb(235,231,231)', display: 'flex', alignItems: 'center', padding: '0 10px', height: 36, fontSize: 10, fontWeight: 500, color: INK, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
            {MMC_CONCEPTS[sel].t.toLowerCase()} — as you
          </div>
          <span style={{ display: 'inline-flex', alignItems: 'center', borderRadius: 10, height: 36, padding: '0 12px', background: PULSE, color: '#fff', fontSize: 8.5, fontWeight: 800, letterSpacing: '0.05em', flexShrink: 0 }}>GENERATE ✦</span>
        </div>
      </MMCCard>
    </MShell>);
};

// § 02 gear gap
const MMCGearGap = () => {
  const [ref, on] = useReveal(0.3);
  return (
    <MShell>
      <MMCBadgeHead label="Micro-Creator · The gear gap" ac="#C77D3A" title={<span>Studio looks.<br /><GradText>Bedroom budget.</GradText></span>}
        sub="Three phone photos become your Character — then every set looks like you hired the photographer you can’t afford yet." />
      <MMCCard lean="right">
        <div ref={ref} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <div style={{ display: 'flex', gap: 4 }}>
            {['assets/phone/p1.webp','assets/phone/p2.webp','assets/phone/p3.webp'].map((g, i) =>
              <span key={i} style={{ position: 'relative', width: 34, height: 42, borderRadius: 7, overflow: 'hidden', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', transform: `rotate(${(i - 1) * 3}deg)` }}>
                <img loading="lazy" decoding="async" src={g} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 18%', filter: 'saturate(0.85)' }} />
              </span>)}
          </div>
          <span style={{ fontSize: 9.5, fontWeight: 700, color: INK, flex: 1 }}>3 phone photos</span>
          <svg width="26" height="14" viewBox="0 0 40 20" style={{ flexShrink: 0 }}>
            <line x1="2" y1="10" x2="28" y2="10" stroke="#813CED" strokeWidth="2.4" strokeDasharray="3 6" strokeLinecap="round" style={{ animation: 'sz-dash 1.2s linear infinite' }} />
            <path d="M26 4l8 6-8 6" fill="none" stroke="#813CED" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          <span style={{ fontSize: 7.5, fontWeight: 800, letterSpacing: '0.05em', color: 'var(--brand-purple-700)', background: 'var(--brand-purple-50)', border: '1px solid var(--brand-purple-200)', borderRadius: 9999, padding: '3px 7px', flexShrink: 0 }}>YOUR CHARACTER</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
          {['assets/phone/gen-morning.webp', 'assets/phone/gen-rooftop.webp', 'assets/phone/gen-bed.webp'].map((g, i) =>
            <div key={i} style={{ position: 'relative', borderRadius: 9, overflow: 'hidden', aspectRatio: '3/3.9' }}>
              <img loading="lazy" decoding="async" src={g} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%',
                opacity: on ? 1 : 0, filter: on ? 'none' : 'blur(10px)', transition: `opacity 0.6s ${SB_EASE} ${300 + i * 130}ms, filter 0.8s ${SB_EASE} ${300 + i * 130}ms` }} />
            </div>)}
        </div>
      </MMCCard>
    </MShell>);
};

// § 03 consistency
const MMC_DAY = [
  { t: '9:00 AM', you: 'Standup', sz: null }, { t: '12:30 PM', you: 'Lunch', sz: 'TikTok' },
  { t: '6:00 PM', you: 'Gym', sz: 'Instagram' }, { t: '9:00 PM', you: 'Couch', sz: 'Fanvue' }];

const MMCConsistency = () => {
  const [ref, on] = useReveal(0.3);
  return (
    <MShell bg="#fff">
      <MMCBadgeHead label="Micro-Creator · Consistency" ac="#3A8F6B" title={<span>Consistent, even<br /><GradText>with a day job.</GradText></span>}
        sub="The algorithm rewards showing up. Queue on Sunday — Sozee posts while you’re in the meeting." />
      <MMCCard lean="left">
        <div ref={ref} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {MMC_DAY.map((r, i) =>
            <div key={r.t} style={{ display: 'grid', gridTemplateColumns: '52px 1fr 1.15fr', gap: 6, alignItems: 'center',
              opacity: on ? 1 : 0, transition: `opacity 0.4s ${SB_EASE} ${i * 80}ms` }}>
              <span style={{ fontSize: 8.5, fontWeight: 700, color: 'rgba(28,27,27,0.45)' }}>{r.t}</span>
              <span style={{ borderRadius: 8, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '7px 9px', fontSize: 9.5, fontWeight: 600, color: 'rgba(28,27,27,0.65)' }}>{r.you}</span>
              {r.sz ?
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, borderRadius: 8, background: 'var(--brand-purple-50)', boxShadow: 'inset 0 0 0 1px var(--brand-purple-200)', padding: '7px 9px', fontSize: 9.5, fontWeight: 700, color: INK }}>
                  <span style={{ width: 12, height: 12, borderRadius: '50%', background: PULSE, display: 'inline-grid', placeItems: 'center', fontSize: 6, color: '#fff', flexShrink: 0 }}>✦</span>Posted · {r.sz}</span> :
                <span style={{ borderRadius: 8, padding: '7px 9px', fontSize: 9.5, fontWeight: 600, color: 'rgba(28,27,27,0.3)', outline: '1px dashed rgba(28,27,27,0.12)', outlineOffset: -1 }}>—</span>}
            </div>
          )}
        </div>
      </MMCCard>
    </MShell>);
};

// § 04 from day one
const MMC_FEATS = [
  { t: 'Create Image', d: 'A set from one sentence.', href: '/create-image', src: 'assets/create/out-mirror.webp' },
  { t: 'Create Video', d: 'Reels with your voice.', href: '/create-video', vid: 'assets/video/explore-1.mp4' },
  { t: 'Photo Control', d: 'Your rooms, wardrobe, angles.', href: '/photo-control', src: 'assets/control/room.png' },
  { t: 'Editing Suite', d: 'Fix anything, no reshoot.', href: '/editing-suite', src: 'assets/edits/color.webp' },
  { t: 'Post & Analyze', d: 'One queue, receipts attached.', href: '/post-analyze', src: GENS[7].src },
  { t: 'Copilot', d: 'Ask. Approve. It ships.', href: '/copilot', src: GENS[1].src }];

const MMCDayOne = () => (
  <MShell>
    <MMCBadgeHead label="Micro-Creator · The toolkit" ac="#813CED" title={<span>The whole studio,<br /><GradText>from day one.</GradText></span>}
      sub="Nothing gated behind follower count — the same tools the big accounts run. Free to start, no card." />
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 28 }}>
      {MMC_FEATS.map((f, i) =>
        <Reveal key={f.t} delay={(i % 2) * 80} y={18}>
          <a href={f.href} style={{ display: 'block', borderRadius: 14, overflow: 'hidden', background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: 'inherit',
            transform: `rotate(${i % 2 ? 0.9 : -0.9}deg)` }}>
            <div style={{ position: 'relative', height: 84, overflow: 'hidden', background: 'rgb(246,243,242)' }}>
              {f.vid ? <video src={f.vid} autoPlay muted loop playsInline preload="metadata" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> :
                <img loading="lazy" decoding="async" src={f.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 16%' }} />}
            </div>
            <div style={{ padding: '10px 12px 12px', textAlign: 'left' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 3 }}>
                <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '-0.01em', color: INK }}>{f.t}</span>
                <svg width="9" height="9" viewBox="0 0 16 16" fill="none" style={{ opacity: 0.45 }}><path d="M4 12L12 4M6.5 4H12v5.5" stroke={INK} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>
              <div style={{ fontSize: 9.5, lineHeight: 1.45, color: 'var(--text-secondary)' }}>{f.d}</div>
            </div>
          </a>
        </Reveal>
      )}
    </div>
  </MShell>
);

const MMCPage = () => (
  <React.Fragment>
    <div style={{ fontFamily: 'var(--font-sans)', maxWidth: 430, margin: '0 auto', boxShadow: '0 0 0 1px rgba(28,27,27,0.06), 0 0 60px rgba(28,27,27,0.08)', overflow: 'clip' }}>
      <div data-screen-label="Hero — Micro-Creator"><MMCHero /></div>
      <div data-screen-label="01 What to post"><MMCWhatToPost /></div>
      <div data-screen-label="02 The gear gap"><MMCGearGap /></div>
      <div data-screen-label="03 Consistency"><MMCConsistency /></div>
      <div data-screen-label="04 The toolkit"><window.MINFeatures /></div>
      <div data-screen-label="05 On the go"><window.MINOnTheGo /></div>
      <div data-screen-label="06 Brand deals"><window.MBrandDealsSection bg="#fff" audience="micro" /></div>
      <div data-screen-label="07 Pricing"><window.MPricingSection /></div>
      <div data-screen-label="08 FAQ"><window.MFAQSection /></div>
      <div data-screen-label="CTA + Footer"><window.MFinalSection /></div>
    </div>
    <window.MCISticky />
    <window.SozeeNavMobile siteHref="/" localLabels={{ '/micro-creator': 'Hero — Micro-Creator', '14 Explore': '01 What to post', '15 Pricing': '07 Pricing', '16 FAQ': '08 FAQ' }} />
  </React.Fragment>
);

Object.assign(window, { MMCPage });
