/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE,
   MShell, MHead, MPhone, MAppHeader */
// Influencer solutions page — mobile layout (skews alternate right → left → right …).
const { useState: imzS, useEffect: imzE } = React;

// eyebrows are hero-only on mobile — keep the heading, drop the pill
const MINBadgeHead = ({ title, sub }) => <MHead title={title} sub={sub} />;

// hero
const MIN_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' }];

const MINHero = () => {
  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 }}>Influencer</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' }}>
            The grind doesn’t scale.<br /><GradText>You do now.</GradText>
          </h1>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 14.5, lineHeight: 1.58, color: 'var(--text-secondary)', margin: '0 0 24px' }}>
            Posting daily across six platforms is a job on top of the job. Sozee shoots, edits, writes and queues as you.
          </p>
        </Reveal>
        <Reveal delay={250} style={{ marginBottom: 34 }}><CTAButton size="sm">Get your week back</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={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span style={{ width: 17, height: 17, borderRadius: '50%', backgroundImage: `url(${GENS[0].src})`, backgroundSize: 'cover', backgroundPosition: 'center 15%' }} />
              <span style={{ fontSize: 11, fontWeight: 800, color: INK }}>This week, already made</span>
            </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' }}>20 min Sunday</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {MIN_QUEUE.map((r, i) =>
              <div key={r.time} style={{ display: 'flex', alignItems: 'center', gap: 8, borderRadius: 10, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '6px 8px',
                opacity: on ? 1 : 0, transition: `opacity 0.45s ${SB_EASE} ${i * 80}ms` }}>
                <span style={{ width: 28, height: 28, borderRadius: 7, 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: 4, fontSize: 10, fontWeight: 700, color: INK }}>
                    <span style={{ width: 5, height: 5, borderRadius: '50%', background: r.c }} />{r.p}</span>
                  <span style={{ display: 'block', fontSize: 8.5, color: 'rgba(28,27,27,0.5)' }}>{r.time}</span>
                </span>
                <span style={{ fontSize: 8, fontWeight: 700, borderRadius: 9999, padding: '2px 8px',
                  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: 6, marginTop: 9, borderRadius: 10, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)', padding: '7px 9px' }}>
            <span style={{ width: 18, height: 18, borderRadius: '50%', background: PULSE, display: 'grid', placeItems: 'center', fontSize: 8, color: '#fff', flexShrink: 0 }}>✦</span>
            <span style={{ fontSize: 9, fontWeight: 600, color: 'rgba(28,27,27,0.65)', flex: 1 }}>“Want me to draft next week too?”</span>
            <span style={{ fontSize: 8.5, fontWeight: 800, letterSpacing: '0.04em', color: 'var(--brand-purple-700)' }}>YES, GO</span>
          </div>
        </div>
      </Reveal>
    </section>);
};

// § 01 The grind
const MIN_BEFORE = [['7:00 AM', 'Makeup, ringlight, shoot 2 hrs'], ['11:00 AM', 'Cull 400 photos to 6'], ['2:00 PM', 'Edit, captions, resize'], ['6:00 PM', 'Post platform by platform']];
const MIN_AFTER = [['9:00 AM', 'Approve Copilot’s set'], ['9:06 AM', 'Queue the week'], ['9:20 AM', 'Done. Go live your life']];

const MINGrind = () => {
  const [ref, on] = useReveal(0.3);
  return (
    <MShell bg="#fff">
      <MINBadgeHead label="Influencer · The grind" ac="#B0489B" title={<span>You became the content.<br /><GradText>Take yourself back.</GradText></span>}
        sub="Sozee takes the shoot day, the edit pass and the posting run — you keep the taste and the final say." />
      <div ref={ref} 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: 12, marginTop: 26, textAlign: 'left',
        transform: 'rotate(-1.2deg) perspective(1200px) rotateY(3deg)' }}>
        <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(28,27,27,0.45)', marginBottom: 7 }}>Your Tuesday, before</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5, marginBottom: 12 }}>
          {MIN_BEFORE.map(([t, d], i) =>
            <div key={t} style={{ display: 'flex', gap: 7, borderRadius: 9, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '6px 9px',
              opacity: on ? 1 : 0, transition: `opacity 0.4s ${SB_EASE} ${i * 60}ms` }}>
              <span style={{ fontSize: 8.5, fontWeight: 700, color: 'rgba(28,27,27,0.45)', width: 48, flexShrink: 0 }}>{t}</span>
              <span style={{ fontSize: 10, fontWeight: 500, color: 'rgba(28,27,27,0.7)', textDecoration: 'line-through', textDecorationColor: 'rgba(28,27,27,0.25)' }}>{d}</span>
            </div>)}
        </div>
        <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--brand-purple-700)', marginBottom: 7 }}>With Sozee</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
          {MIN_AFTER.map(([t, d], i) =>
            <div key={t} style={{ display: 'flex', gap: 7, alignItems: 'center', borderRadius: 9, background: 'var(--brand-purple-50)', boxShadow: 'inset 0 0 0 1px var(--brand-purple-200)', padding: '6px 9px',
              opacity: on ? 1 : 0, transition: `opacity 0.4s ${SB_EASE} ${300 + i * 80}ms` }}>
              <span style={{ fontSize: 8.5, fontWeight: 700, color: 'var(--brand-purple-700)', width: 48, flexShrink: 0 }}>{t}</span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 10, fontWeight: 600, color: INK }}>
                <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.4" strokeLinecap="round" strokeLinejoin="round" /></svg>{d}</span>
            </div>)}
        </div>
      </div>
    </MShell>);
};

// § 02 feature rack
const MIN_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 MINFeatures = () => (
  <MShell>
    <MINBadgeHead label="Influencer · The toolkit" ac="#813CED" title={<span>Built for people<br /><GradText>who post for a living.</GradText></span>}
      sub="Every tool in the studio exists to kill a step of the grind." />
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 28 }}>
      {MIN_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>
);

// § 03 on the go
const MINOnTheGo = () => {
  const [ref, on] = useReveal(0.3);
  const [step, setStep] = imzS(0);
  imzE(() => {
    if (!on) return;
    const t = setInterval(() => setStep(s => (s + 1) % 3), 2600);
    return () => clearInterval(t);
  }, [on]);
  return (
    <MShell bg="#fff">
      <MINBadgeHead label="Influencer · On the go" ac="#4D73F2" title={<span>The studio fits<br /><GradText>in your pocket.</GradText></span>}
        sub="Generate in the car, swap an option in line for coffee, approve tonight’s post from the couch." />
      <div ref={ref} style={{ marginTop: 26, transform: 'rotate(1.2deg) perspective(1200px) rotateY(-3deg)' }}>
        <MPhone w={244} ratio="9 / 17.4">
          <MAppHeader />
          <div style={{ padding: '2px 12px 12px', display: 'flex', flexDirection: 'column', gap: 8, flex: 1, minHeight: 0, textAlign: 'left' }}>
            <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: '-0.01em', color: INK }}>Tonight’s post</div>
            <div style={{ position: 'relative', borderRadius: 12, overflow: 'hidden', flex: 1, minHeight: 0, background: 'rgb(246,243,242)' }}>
              {[GENS[7], GENS[1], GENS[3]].map((g, i) =>
                <img loading="lazy" decoding="async" key={i} src={g.src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 14%',
                  opacity: step === i ? 1 : 0, transition: `opacity 0.5s ${SB_EASE}` }} />)}
              <span style={{ position: 'absolute', left: 7, bottom: 7, fontSize: 7.5, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', borderRadius: 9999, padding: '2px 7px' }}>Option {step + 1} / 3</span>
              <span style={{ position: 'absolute', top: 7, right: 7, fontSize: 7, fontWeight: 700, color: 'var(--brand-purple-700)', background: 'rgba(252,248,248,0.92)', borderRadius: 9999, padding: '2px 7px' }}>✦ Copilot</span>
            </div>
            <div style={{ display: 'flex', gap: 4 }}>
              <span style={{ flex: 1, textAlign: 'center', borderRadius: 9999, padding: '7px 0', fontSize: 8.5, fontWeight: 700, color: 'rgba(28,27,27,0.6)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.12)' }}>Swap</span>
              <span style={{ flex: 1.6, textAlign: 'center', borderRadius: 9999, padding: '7px 0', fontSize: 8.5, fontWeight: 800, letterSpacing: '0.04em', color: '#fff', background: PULSE }}>APPROVE · 9 PM</span>
            </div>
          </div>
        </MPhone>
      </div>
      <Reveal delay={260}>
        <p style={{ marginTop: 18, fontSize: 11, lineHeight: 1.55, color: 'var(--text-tertiary)', textAlign: 'center' }}>
          Coming soon: Copilot by text, Telegram or WhatsApp — the full studio without logging in.
        </p>
      </Reveal>
    </MShell>);
};

const MINPage = () => (
  <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 — Influencer"><MINHero /></div>
      <div data-screen-label="01 The grind"><MINGrind /></div>
      <div data-screen-label="02 The toolkit"><MINFeatures /></div>
      <div data-screen-label="03 On the go"><MINOnTheGo /></div>
      <div data-screen-label="04 Brand deals"><window.MBrandDealsSection bg="#fff" audience="influencer" /></div>
      <div data-screen-label="05 Pricing"><window.MPricingSection /></div>
      <div data-screen-label="06 FAQ"><window.MFAQSection /></div>
      <div data-screen-label="CTA + Footer"><window.MFinalSection /></div>
    </div>
    <window.MCISticky />
    <window.SozeeNavMobile siteHref="/" localLabels={{ '/influencer': 'Hero — Influencer', '15 Pricing': '05 Pricing', '16 FAQ': '06 FAQ' }} />
  </React.Fragment>
);

Object.assign(window, { MINPage, MINOnTheGo, MINFeatures });
