// Instagram Stories — 9:16 cards, 6 variations
// Each story is 1080x1920 (scaled to fit)

const { UARINI, SpiralPatch, Wordmark, LogoLockup, GrainOverlay, StripesMark, PhotoPlaceholder } = window;

function StoryFrame({ children, scale = 0.4 }) {
  const W = 1080, H = 1920;
  return (
    <div style={{
      width: W * scale, height: H * scale,
      position: 'relative', overflow: 'hidden',
      borderRadius: 36 * scale, background: '#000',
      boxShadow: '0 16px 40px rgba(0,0,0,0.35)',
    }}>
      <div style={{ width: W, height: H, transformOrigin: '0 0', transform: `scale(${scale})`, position: 'absolute', top: 0, left: 0 }}>
        {children}
      </div>
    </div>
  );
}

function StoryChrome({ idx = 0, count = 6, time = '9:41' }) {
  return (
    <>
      {/* Status bar */}
      <div style={{ position: 'absolute', top: 30, left: 0, right: 0, padding: '0 56px', display: 'flex', justifyContent: 'space-between', color: UARINI.cream, fontFamily: 'Poppins', fontWeight: 600, fontSize: 36, zIndex: 50 }}>
        <span>{time}</span>
        <span>● ● ●</span>
      </div>
      {/* Progress */}
      <div style={{ position: 'absolute', top: 100, left: 30, right: 30, display: 'flex', gap: 6, zIndex: 50 }}>
        {Array.from({ length: count }).map((_, i) => (
          <div key={i} style={{ flex: 1, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.35)', overflow: 'hidden' }}>
            <div style={{ width: i < idx ? '100%' : i === idx ? '60%' : '0%', height: '100%', background: UARINI.cream }}/>
          </div>
        ))}
      </div>
      {/* User row */}
      <div style={{ position: 'absolute', top: 130, left: 30, right: 30, display: 'flex', alignItems: 'center', gap: 18, zIndex: 50 }}>
        <div style={{
          width: 72, height: 72, borderRadius: '50%',
          background: UARINI.black, display: 'flex', alignItems: 'center', justifyContent: 'center',
          border: `2px solid ${UARINI.green}`, overflow: 'hidden',
        }}>
          <SpiralPatch size={56} tone="green-on-dark" rotation={-6}/>
        </div>
        <div style={{ color: UARINI.cream, fontFamily: 'Poppins', fontWeight: 600, fontSize: 32 }}>studiouarini</div>
        <div style={{ color: UARINI.cream, opacity: 0.6, fontFamily: 'Poppins', fontSize: 26 }}>2h</div>
      </div>
      {/* Reply bar */}
      <div style={{ position: 'absolute', bottom: 50, left: 40, right: 40, display: 'flex', gap: 22, alignItems: 'center', zIndex: 50 }}>
        <div style={{ flex: 1, height: 92, borderRadius: 999, border: `2px solid ${UARINI.cream}88`, padding: '0 36px', display: 'flex', alignItems: 'center', color: UARINI.cream, opacity: 0.85, fontFamily: 'Poppins', fontSize: 30 }}>
          Enviar mensagem...
        </div>
        <div style={{ width: 64, height: 64, color: UARINI.cream, fontSize: 36 }}>♡</div>
        <div style={{ width: 64, height: 64, color: UARINI.cream, fontSize: 36 }}>↗</div>
      </div>
    </>
  );
}

// 6 story variations
function Story1_Welcome() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: UARINI.black, color: UARINI.cream, overflow: 'hidden', fontFamily: 'Poppins' }}>
      <GrainOverlay opacity={0.06} blend="screen"/>
      <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}>
        <LogoLockup height={680} color={UARINI.cream}/>
      </div>
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 320, textAlign: 'center', fontSize: 48, letterSpacing: '0.32em', color: UARINI.green, fontWeight: 600 }}>
        BEM-VINDX
      </div>
      <StoryChrome idx={0}/>
    </div>
  );
}

function Story2_Servico() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: UARINI.green, color: UARINI.black, overflow: 'hidden', fontFamily: 'Poppins' }}>
      <GrainOverlay opacity={0.18} blend="multiply"/>
      <div style={{ position: 'absolute', right: -120, top: -100 }}>
        <SpiralPatch size={620} tone="dark-on-cream" rotation={-12}/>
      </div>
      <div style={{ position: 'absolute', left: 70, right: 70, top: 380 }}>
        <div style={{ fontSize: 40, letterSpacing: '0.32em', fontWeight: 600, marginBottom: 30 }}>NOVO SERVIÇO</div>
        <div style={{ fontSize: 160, fontWeight: 700, lineHeight: 0.92, letterSpacing: '-0.04em' }}>
          Terapia<br/>Capilar<br/>Ancestral
        </div>
        <div style={{ fontSize: 38, marginTop: 50, lineHeight: 1.4, opacity: 0.85, maxWidth: 720 }}>
          Massagem, óleos vegetais e escalda-pés.
          Cuidado que vem antes da estética.
        </div>
      </div>
      <div style={{ position: 'absolute', left: 70, bottom: 240, display: 'flex', alignItems: 'center', gap: 20 }}>
        <div style={{ background: UARINI.black, color: UARINI.cream, padding: '24px 50px', borderRadius: 999, fontWeight: 700, fontSize: 36, letterSpacing: '0.18em' }}>SAIBA MAIS ↗</div>
      </div>
      <StoryChrome idx={1}/>
    </div>
  );
}

function Story3_Behind() {
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', fontFamily: 'Poppins' }}>
      <PhotoPlaceholder tone="warm"/>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.7) 100%)' }}/>
      {/* tilted "label" sticker */}
      <div style={{ position: 'absolute', left: 80, top: 360, transform: 'rotate(-4deg)', background: UARINI.cream, color: UARINI.black, padding: '24px 46px', boxShadow: '0 8px 30px rgba(0,0,0,0.4)' }}>
        <div style={{ fontSize: 28, letterSpacing: '0.32em', fontWeight: 600, color: UARINI.green }}>BASTIDOR</div>
        <div style={{ fontSize: 88, fontWeight: 700, lineHeight: 1, marginTop: 8, letterSpacing: '-0.02em' }}>terça,<br/>14h32</div>
      </div>
      {/* mention sticker */}
      <div style={{ position: 'absolute', right: 70, bottom: 380, transform: 'rotate(3deg)', background: UARINI.green, color: UARINI.black, padding: '20px 36px', borderRadius: 16, fontSize: 36, fontWeight: 700, fontFamily: 'Poppins', letterSpacing: '0.05em' }}>
          @ennaiane_
      </div>
      <div style={{ position: 'absolute', left: 80, bottom: 260, color: UARINI.cream, fontSize: 38, fontFamily: 'Poppins', fontWeight: 500, letterSpacing: '0.04em' }}>
        cliente novo, ritual antigo ✦
      </div>
      <StoryChrome idx={2}/>
    </div>
  );
}

function Story4_Quote() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: UARINI.cream, color: UARINI.black, overflow: 'hidden', fontFamily: 'Poppins' }}>
      <GrainOverlay opacity={0.10} blend="multiply"/>
      <div style={{ position: 'absolute', left: 90, top: 300 }}>
        <SpiralPatch size={140} tone="green-on-cream" rotation={-8}/>
      </div>
      <div style={{ position: 'absolute', left: 90, right: 90, top: 580 }}>
        <div style={{ fontSize: 32, letterSpacing: '0.32em', color: UARINI.green, fontWeight: 600, marginBottom: 50 }}>SABEDORIA · 02</div>
        <div style={{ fontSize: 110, fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.025em' }}>
          "Cabelo<br/>é raiz.<br/>Corte<br/>é rito."
        </div>
      </div>
      <div style={{ position: 'absolute', left: 90, bottom: 260, fontSize: 30, fontWeight: 700, letterSpacing: '0.22em' }}>
        — NAIANE TENÓRIO
      </div>
      <StoryChrome idx={3}/>
    </div>
  );
}

function Story5_Poll() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: UARINI.black, overflow: 'hidden', fontFamily: 'Poppins' }}>
      <div style={{ position: 'absolute', inset: 0 }}>
        <PhotoPlaceholder tone="moss"/>
      </div>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(14,13,13,0.5) 0%, rgba(14,13,13,0.2) 50%, rgba(14,13,13,0.85) 100%)' }}/>

      {/* "ask me" sticker */}
      <div style={{ position: 'absolute', left: 70, right: 70, top: 720, background: UARINI.cream, padding: '46px 50px', borderRadius: 30, color: UARINI.black, boxShadow: '0 12px 40px rgba(0,0,0,0.4)' }}>
        <div style={{ fontSize: 28, letterSpacing: '0.32em', color: UARINI.green, fontWeight: 600, marginBottom: 18 }}>ENQUETE</div>
        <div style={{ fontSize: 56, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em' }}>
          Próximo conteúdo?
        </div>
      </div>

      {/* options */}
      <div style={{ position: 'absolute', left: 70, right: 70, top: 990, display: 'flex', flexDirection: 'column', gap: 22 }}>
        {[
          ['Tutorial: barba navalhada', 67, UARINI.green],
          ['Tour pelo studio', 33, UARINI.cream],
        ].map(([label, pct, c], i) => (
          <div key={i} style={{ background: 'rgba(255,255,255,0.15)', backdropFilter: 'blur(12px)', borderRadius: 18, padding: '22px 30px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${pct}%`, background: c, opacity: 0.35 }}/>
            <div style={{ position: 'relative', color: UARINI.cream, fontSize: 36, fontWeight: 600 }}>{label}</div>
            <div style={{ position: 'relative', color: UARINI.cream, fontSize: 36, fontWeight: 700 }}>{pct}%</div>
          </div>
        ))}
      </div>

      <StoryChrome idx={4}/>
    </div>
  );
}

function Story6_Agenda() {
  return (
    <div style={{ position: 'absolute', inset: 0, background: UARINI.black, color: UARINI.cream, overflow: 'hidden', fontFamily: 'Poppins' }}>
      <GrainOverlay opacity={0.06} blend="screen"/>
      <div style={{ position: 'absolute', right: -160, bottom: -180, opacity: 0.18 }}>
        <SpiralPatch size={900} tone="green-on-dark" rotation={20}/>
      </div>
      <div style={{ position: 'absolute', left: 70, top: 380 }}>
        <div style={{ fontSize: 32, letterSpacing: '0.32em', color: UARINI.green, fontWeight: 600, marginBottom: 30 }}>AGENDA · MAIO</div>
        <div style={{ fontSize: 200, fontWeight: 700, lineHeight: 0.85, letterSpacing: '-0.04em', color: UARINI.cream }}>
          Abriu<br/>horário.
        </div>
      </div>

      {/* date stickers */}
      <div style={{ position: 'absolute', left: 70, right: 70, top: 1080, display: 'flex', flexWrap: 'wrap', gap: 18 }}>
        {[
          { d: 'QUA 14', h: '14:00' },
          { d: 'QUA 14', h: '16:30' },
          { d: 'SEX 16', h: '15:00' },
          { d: 'SEX 16', h: '17:00' },
          { d: 'SAB 17', h: '10:00' },
          { d: 'SAB 17', h: '11:30' },
        ].map(({ d, h }, i) => (
          <div key={i} style={{ padding: '18px 26px', borderRadius: 18, background: i === 1 ? UARINI.green : 'rgba(255,255,255,0.08)', color: i === 1 ? UARINI.black : UARINI.cream, border: i === 1 ? 'none' : `1.5px solid ${UARINI.cream}30` }}>
            <div style={{ fontSize: 22, letterSpacing: '0.22em', opacity: 0.7 }}>{d}</div>
            <div style={{ fontSize: 38, fontWeight: 700, marginTop: 4 }}>{h}</div>
          </div>
        ))}
      </div>

      {/* link sticker */}
      <div style={{ position: 'absolute', left: 70, right: 70, bottom: 320, background: UARINI.cream, color: UARINI.black, padding: '32px 40px', borderRadius: 24, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 24, letterSpacing: '0.32em', color: UARINI.green, fontWeight: 600 }}>LINK</div>
          <div style={{ fontSize: 44, fontWeight: 700, marginTop: 6 }}>uarini.studio/agenda</div>
        </div>
        <div style={{ width: 80, height: 80, borderRadius: '50%', background: UARINI.green, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 44, color: UARINI.black, fontWeight: 700 }}>↗</div>
      </div>

      <StoryChrome idx={5}/>
    </div>
  );
}

function StoriesSequence({ scale = 0.36 }) {
  const stories = [Story1_Welcome, Story2_Servico, Story3_Behind, Story4_Quote, Story5_Poll, Story6_Agenda];
  return (
    <div style={{ display: 'flex', gap: 28, padding: 0 }}>
      {stories.map((S, i) => (
        <StoryFrame key={i} scale={scale}><S/></StoryFrame>
      ))}
    </div>
  );
}

window.StoriesSequence = StoriesSequence;
window.StoryFrame = StoryFrame;
window.STORY_RENDERERS = { Story1_Welcome, Story2_Servico, Story3_Behind, Story4_Quote, Story5_Poll, Story6_Agenda };