/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE */
// Micro-Creator solutions page — What to post · The gear gap · Consistency · From day one.
const { useState: mzS, useEffect: mzE } = React;

const MCBadge = ({ label, ac = '#813CED', bg = CREAM }) =>
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 18, borderRadius: 9999, padding: '7px 14px', background: bg, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)' }}>
    <span style={{ width: 7, height: 7, borderRadius: '50%', background: ac }} />
    <span style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>{label}</span>
  </div>;

const MCSectionShell = ({ label, ac, h1, h2, sub, note, panel, flip = false, lean = 'right', bg = '#fff' }) => (
  <section style={{ background: bg, padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto', display: 'grid', gridTemplateColumns: flip ? '1.1fr 0.9fr' : '0.9fr 1.1fr', gap: 64, alignItems: 'center' }}>
      <div style={{ order: flip ? 2 : 1 }}>
        <Reveal delay={90}>
          <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px', textWrap: 'balance' }}>{h1}<br /><GradText>{h2}</GradText></h2>
        </Reveal>
        <Reveal delay={170}><p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 0 28px', maxWidth: 420 }}>{sub}</p></Reveal>
        <Reveal delay={250}><CTAButton>Start free — no card</CTAButton></Reveal>
        {note && <Reveal delay={330}><div style={{ marginTop: 26, fontSize: 13, color: 'var(--text-tertiary)' }}>{note}</div></Reveal>}
      </div>
      <Reveal delay={160} y={28} style={{ order: flip ? 1 : 2 }}>
        <div style={{ transform: lean === 'left' ? 'rotate(-1.3deg) perspective(1400px) rotateY(4deg)' : 'rotate(1.3deg) perspective(1400px) rotateY(-4deg)', transformOrigin: 'center' }}>{panel}</div>
      </Reveal>
    </div>
  </section>
);

const MCCard = ({ children, pad = 18 }) =>
  <div style={{ borderRadius: 20, background: '#fff', boxShadow: '0 24px 48px rgba(28,27,27,0.14), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: pad }}>{children}</div>;

// ---------- § 01 What to post — Explore ----------
const MC_CONCEPTS = [
  { src: 'assets/explore/x21.webp', t: 'Golden hour balcony', s: '2.1M plays' },
  { src: 'assets/explore/x02.mp4', v: true, t: 'GRWM mirror fit', s: '1.4M plays' },
  { src: 'assets/explore/x23.webp', t: 'Poolside golden light', s: '3.8M plays' },
  { src: 'assets/explore/x04.mp4', v: true, t: 'Cozy Sunday reset', s: '940k plays' },
  { src: 'assets/explore/x30.webp', t: 'Beach walk POV', s: '1.9M plays' },
  { src: 'assets/explore/x13.mp4', v: true, t: 'Soft studio portrait', s: '1.2M plays' }];

const ExplorePanelMC = () => {
  const [sel, setSel] = mzS(2);
  return (
    <MCCard>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
        <span style={{ fontSize: 12.5, fontWeight: 700, color: INK }}>Explore <span style={{ fontWeight: 600, color: 'var(--text-tertiary)' }}>· concepts that already perform</span></span>
        <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--brand-purple-700)' }}>Tap to prefill</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 9 }}>
        {MC_CONCEPTS.map((c, i) =>
          <div key={c.t} onClick={() => setSel(i)} style={{ cursor: 'pointer' }}>
            <div style={{ position: 'relative', borderRadius: 11, overflow: 'hidden', aspectRatio: '3/3.7',
              outline: sel === i ? '2px solid var(--brand-purple-500)' : '1px solid rgba(28,27,27,0.1)', outlineOffset: -1, transition: `all 0.25s ${SB_EASE}` }}>
              {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: 6, bottom: 6, display: 'inline-flex', alignItems: 'center', gap: 3, borderRadius: 9999, padding: '2px 6px', background: 'rgba(28,27,27,0.55)', backdropFilter: 'blur(6px)', fontSize: 7, fontWeight: 700, color: '#fff' }}>
                <svg width="5" height="6" viewBox="0 0 8 10" fill="#fff"><path d="M0 0l8 5-8 5z" /></svg>Video</span>}
              <span style={{ position: 'absolute', left: 6, bottom: 6, fontSize: 8, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', backdropFilter: 'blur(6px)', borderRadius: 9999, padding: '2px 7px' }}>{c.s}</span>
              {sel === i && <span style={{ position: 'absolute', top: 6, right: 6, width: 17, height: 17, borderRadius: '50%', background: 'var(--brand-purple-500)', display: 'grid', placeItems: 'center' }}>
                <svg width="9" height="9" viewBox="0 0 16 16" fill="none"><path d="M3 8.4l3.2 3.2L13.5 4" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg></span>}
            </div>
            <div style={{ marginTop: 6, fontSize: 10, 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: 8, alignItems: 'center', marginTop: 13 }}>
        <div style={{ flex: 1, borderRadius: 11, background: 'rgb(235,231,231)', display: 'flex', alignItems: 'center', padding: '0 13px', height: 42, fontSize: 11.5, fontWeight: 500, color: INK, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
          {MC_CONCEPTS[sel].t.toLowerCase()} — as your Character
        </div>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 11, height: 42, padding: '0 15px', background: PULSE, color: '#fff', fontSize: 10, fontWeight: 800, letterSpacing: '0.05em', flexShrink: 0 }}>GENERATE ✦</span>
      </div>
    </MCCard>);
};

// ---------- § 02 The gear gap ----------
const GearGapPanel = () => {
  const [ref, on] = useReveal(0.35);
  return (
    <MCCard>
      <div ref={ref}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
          <div style={{ display: 'flex', gap: 6 }}>
            {['assets/phone/p1.webp', 'assets/phone/p2.webp', 'assets/phone/p3.webp'].map((src, i) =>
              <span key={i} style={{ position: 'relative', width: 52, height: 62, borderRadius: 9, overflow: 'hidden', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1)',
                transform: `rotate(${(i - 1) * 3}deg)`, opacity: on ? 1 : 0, transition: `opacity 0.4s ${SB_EASE} ${i * 90}ms` }}>
                <img loading="lazy" decoding="async" src={src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 18%', filter: 'saturate(0.85)' }} />
              </span>)}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11.5, fontWeight: 700, color: INK }}>Three phone photos</div>
            <div style={{ fontSize: 10.5, color: 'var(--text-secondary)' }}>Bathroom light is fine. That’s the whole shoot.</div>
          </div>
          <svg width="34" height="18" viewBox="0 0 40 20" style={{ flexShrink: 0 }}>
            <line x1="2" y1="10" x2="30" y2="10" stroke="#813CED" strokeWidth="2" strokeDasharray="3 6" strokeLinecap="round" style={{ animation: 'sz-dash 1.2s linear infinite' }} />
            <path d="M28 4l8 6-8 6" fill="none" stroke="#813CED" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.06em', color: 'var(--brand-purple-700)', background: 'var(--brand-purple-50)', border: '1px solid var(--brand-purple-200)', borderRadius: 9999, padding: '4px 10px', flexShrink: 0 }}>YOUR CHARACTER</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 9 }}>
          {['assets/phone/gen-morning.webp', 'assets/phone/gen-rooftop.webp', 'assets/phone/gen-bed.webp'].map((src, i) =>
            <div key={i} style={{ position: 'relative', borderRadius: 12, overflow: 'hidden', aspectRatio: '3/3.9' }}>
              <img loading="lazy" decoding="async" src={src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 20%',
                opacity: on ? 1 : 0, filter: on ? 'none' : 'blur(12px)', transition: `opacity 0.6s ${SB_EASE} ${350 + i * 140}ms, filter 0.8s ${SB_EASE} ${350 + i * 140}ms` }} />
              <span style={{ position: 'absolute', left: 7, bottom: 7, fontSize: 8.5, fontWeight: 700, color: '#fff', background: 'rgba(28,27,27,0.55)', backdropFilter: 'blur(6px)', borderRadius: 9999, padding: '2px 8px' }}>
                {['Morning light', 'Rooftop night', 'Lazy Sunday'][i]}</span>
            </div>)}
        </div>
        <div style={{ marginTop: 12, fontSize: 11.5, color: 'var(--text-secondary)' }}>No ringlight, no photographer, no apartment with good light — every set comes out looking hired.</div>
      </div>
    </MCCard>);
};

// ---------- § 03 Consistency ----------
const MC_DAY = [
  { t: '9:00 AM', you: 'Standup meeting', sz: null },
  { t: '12:30 PM', you: 'Lunch at your desk', sz: 'Posted to TikTok' },
  { t: '3:00 PM', you: 'Deep work block', sz: null },
  { t: '6:00 PM', you: 'Gym', sz: 'Posted to Instagram' },
  { t: '9:00 PM', you: 'Couch', sz: 'Posted to Fanvue' }];

const ConsistencyPanel = () => {
  const [ref, on] = useReveal(0.35);
  return (
    <MCCard>
      <div ref={ref}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
          <span style={{ fontSize: 12.5, fontWeight: 700, color: INK }}>Wednesday</span>
          <span style={{ whiteSpace: 'nowrap', fontSize: 10.5, fontWeight: 600, color: 'var(--text-tertiary)' }}>Queued Sunday night · 20 min</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
          {MC_DAY.map((r, i) =>
            <div key={r.t} style={{ display: 'grid', gridTemplateColumns: '64px 1fr 1fr', gap: 8, alignItems: 'center',
              opacity: on ? 1 : 0, transition: `opacity 0.4s ${SB_EASE} ${i * 90}ms` }}>
              <span style={{ fontSize: 9.5, fontWeight: 700, color: 'rgba(28,27,27,0.45)' }}>{r.t}</span>
              <span style={{ borderRadius: 10, background: 'rgb(250,247,247)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: '8px 11px', fontSize: 11, fontWeight: 600, color: 'rgba(28,27,27,0.65)' }}>{r.you}</span>
              {r.sz ?
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, borderRadius: 10, background: 'var(--brand-purple-50)', boxShadow: 'inset 0 0 0 1px var(--brand-purple-200)', padding: '8px 11px', fontSize: 11, fontWeight: 700, color: INK }}>
                  <span style={{ width: 15, height: 15, borderRadius: '50%', background: PULSE, display: 'inline-grid', placeItems: 'center', fontSize: 7, color: '#fff', flexShrink: 0 }}>✦</span>{r.sz}</span> :
                <span style={{ borderRadius: 10, padding: '8px 11px', fontSize: 11, fontWeight: 600, color: 'rgba(28,27,27,0.3)', outline: '1px dashed rgba(28,27,27,0.12)', outlineOffset: -1 }}>—</span>}
            </div>
          )}
        </div>
        <div style={{ display: 'flex', gap: 12, marginTop: 12, paddingTop: 11, borderTop: '1px solid rgba(28,27,27,0.07)' }}>
          <span style={{ fontSize: 10.5, fontWeight: 600, color: 'var(--text-secondary)' }}>Your day</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 10.5, fontWeight: 600, color: 'var(--text-secondary)' }}>
            <span style={{ width: 7, height: 7, borderRadius: 2, background: PULSE }} />Sozee, posting as you</span>
        </div>
      </div>
    </MCCard>);
};

const WhatToPostSection = () => <MCSectionShell label="What to post" ac="#4D73F2" h1="Never stare at" h2="a blank feed." lean="left"
  sub="You don’t have years of data on what works — Explore does. A feed of concepts already performing right now: tap one, it prefills the composer as your Character."
  note="Borrowed instincts until you’ve built your own." panel={<ExplorePanelMC />} />;
const GearGapSection = () => <MCSectionShell label="The gear gap" ac="#C77D3A" h1="Studio looks." h2="Bedroom budget." flip lean="right" bg={CREAM}
  sub="Three phone photos become your Character — private, yours alone. From then on every set looks like you hired the photographer you can’t afford yet."
  panel={<GearGapPanel />} />;
const ConsistencySection = () => <MCSectionShell label="Consistency" ac="#3A8F6B" h1="Consistent," h2="even with a day job." lean="left"
  sub="The algorithm rewards showing up, and you have 40 hours a week already spoken for. Queue on Sunday — Sozee posts while you’re in the meeting."
  panel={<ConsistencyPanel />} />;

// ---------- § 04 From day one — the toolkit (reuses the Influencer rack media) ----------
const DayOneSection = () => (
  <section style={{ background: '#fff', padding: '110px 56px' }}>
    <div style={{ maxWidth: 1140, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 46 }}>
        <Reveal delay={90}>
          <h2 style={{ font: '800 52px/1 var(--font-sans)', letterSpacing: '-0.03em', color: INK, margin: '0 0 18px' }}>
            The whole studio,<br /><GradText>from day one.</GradText>
          </h2>
        </Reveal>
        <Reveal delay={170}>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-secondary)', margin: '0 auto', maxWidth: 520 }}>
            Nothing here is gated behind follower count — you run the same tools the big accounts do. Free to start, no card.
          </p>
        </Reveal>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {window.IN_FEATS.map((f, i) =>
          <Reveal key={f.t} delay={(i % 3) * 100} y={24}>
            <a href={f.href} style={{ display: 'block', borderRadius: 16, overflow: 'hidden', background: CREAM, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', color: 'inherit',
              transform: `rotate(${i % 2 ? 0.8 : -0.8}deg) perspective(1200px) rotateY(${i % 2 ? -1.5 : 1.5}deg)` }}>
              <window.INFeatMedia kind={f.kind} />
              <div style={{ padding: '14px 16px 17px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 5 }}>
                  <span style={{ fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em', color: INK }}>{f.t}</span>
                  <svg width="11" height="11" 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: 12.5, lineHeight: 1.5, color: 'var(--text-secondary)' }}>{f.d}</div>
              </div>
            </a>
          </Reveal>
        )}
      </div>
    </div>
  </section>
);

Object.assign(window, { WhatToPostSection, GearGapSection, ConsistencySection, DayOneSection });