/* ===== Lya Torres Imóveis — Stories · app ===== */
const { useState, useEffect, useRef, useCallback } = React;

/* -- Símbolo da marca (janela monolinha) -- */
function Mark({ size = 30, stroke = 1.7 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }} aria-hidden="true">
      <g fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round">
        <rect x="12" y="10" width="76" height="80" />
        <line x1="50" y1="10" x2="50" y2="88" />
        <line x1="12" y1="45" x2="50" y2="45" />
        <path d="M12 50 C 24 84, 52 90, 84 64" />
        <path d="M18 52 C 30 80, 52 85, 81 65" />
        <path d="M80 68 C 77.5 60, 76.5 54, 75 48" />
      </g>
      <g fill="currentColor" stroke="none">
        <path d="M76.5 53 C 77.47,47.34 74.87,41.54 70 38.5 C 69.03,44.16 71.63,49.96 76.5 53 Z" />
        <path d="M79 56 C 83.12,55.34 85.52,52.14 85 48 C 80.88,48.66 78.48,51.86 79 56 Z" />
        <path d="M78 59 C 75.03,55.16 70.03,53.76 65.5 55.5 C 68.47,59.34 73.47,60.74 78 59 Z" />
        <circle cx="75" cy="25" r="5.6" />
      </g>
    </svg>
  );
}

/* -- topo: barras de progresso estilo stories (animação via CSS) -- */
function Progress({ total, index, theme, auto, speed, paused, onComplete }) {
  const track = theme.isDark ? 'rgba(245,241,236,0.22)' : 'rgba(58,42,34,0.16)';
  const fill = theme.accent;
  return (
    <div style={{ display: 'flex', gap: 5, padding: '0 4px' }}>
      {Array.from({ length: total }).map((_, i) => {
        let inner;
        if (i < index) {
          inner = { width: '100%' };
        } else if (i === index) {
          inner = auto
            ? { width: '0%', animation: `ltFill ${speed}s linear forwards`, animationPlayState: paused ? 'paused' : 'running' }
            : { width: '14%' };
        } else {
          inner = { width: '0%' };
        }
        return (
          <div key={i} style={{ flex: 1, height: 2.5, borderRadius: 3, background: track, overflow: 'hidden' }}>
            <div
              key={i === index ? `a${index}` : `s${i}`}
              onAnimationEnd={i === index && auto ? onComplete : undefined}
              style={{ height: '100%', background: fill, borderRadius: 3, ...inner }}
            />
          </div>
        );
      })}
    </div>
  );
}

/* -- lockup do cabeçalho -- */
function HeaderLockup({ theme, index, total }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: theme.mark }}>
        <Mark size={26} />
        <span style={{
          fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 10.5, fontWeight: 600,
          letterSpacing: '0.26em', color: theme.ink, paddingTop: 1,
        }}>LYA TORRES</span>
      </div>
      <span style={{
        fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 11, fontWeight: 500,
        letterSpacing: '0.12em', color: theme.inkSoft, fontVariantNumeric: 'tabular-nums',
      }}>{String(index + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}</span>
    </div>
  );
}

/* -- rodapé assinatura -- */
function FooterSig({ theme }) {
  const f = window.LT_FOOTER;
  return (
    <div style={{ textAlign: 'center' }}>
      <div style={{ width: 30, height: 1, background: theme.accentSoft, margin: '0 auto 14px' }} />
      <div style={{
        fontFamily: 'Cormorant Garamond, serif', fontStyle: 'italic', fontSize: 14.5,
        color: theme.inkSoft, marginBottom: 7,
      }}>“{f.tagline}”</div>
      <div style={{
        fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 9.5, fontWeight: 600,
        letterSpacing: '0.2em', color: theme.inkSoft, textTransform: 'uppercase',
      }}>{f.handle} &nbsp;·&nbsp; {f.creci}</div>
    </div>
  );
}

function Kicker({ children, theme }) {
  return (
    <div className="lt-rise" style={{
      fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 11, fontWeight: 700,
      letterSpacing: '0.26em', textTransform: 'uppercase', color: theme.accent,
      animationDelay: '.05s',
    }}>{children}</div>
  );
}

function Highlight({ children, theme, delay }) {
  return (
    <div className="lt-rise" style={{
      fontFamily: 'Cormorant Garamond, serif', fontStyle: 'italic', fontWeight: 600,
      fontSize: 22, lineHeight: 1.28, color: theme.accent, animationDelay: delay,
    }}>{children}</div>
  );
}

/* -- corpo de um slide conforme o tipo -- */
function SlideBody({ slide, theme }) {
  if (slide.type === 'cover' || slide.type === 'closing') {
    const big = slide.type === 'cover';
    const lines = slide.title.split('\n');
    return (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
        <Kicker theme={theme}>{slide.kicker}</Kicker>
        <h1 className="lt-rise" style={{
          fontFamily: 'Cormorant Garamond, serif', fontWeight: 600, margin: '20px 0 0',
          fontSize: big ? 41 : 39, lineHeight: 1.05, letterSpacing: '-0.01em',
          color: theme.ink, animationDelay: '.1s',
        }}>{lines.map((l, i) => (<span key={i} style={{ display: 'block', whiteSpace: 'nowrap' }}>{l}</span>))}</h1>
        <p className="lt-rise" style={{
          fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 16, lineHeight: 1.6,
          color: theme.inkSoft, margin: '20px 0 0', maxWidth: '30ch', animationDelay: '.18s',
        }}>{slide.subtitle}</p>
        {slide.type === 'cover' && (
          <div className="lt-rise" style={{
            display: 'flex', alignItems: 'center', gap: 10, marginTop: 24,
            fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 11, fontWeight: 600,
            letterSpacing: '0.18em', textTransform: 'uppercase', color: theme.accent,
            animationDelay: '.28s',
          }}>
            <span>{slide.hint}</span>
            <svg width="26" height="9" viewBox="0 0 26 9" fill="none" className="lt-nudge">
              <path d="M1 4.5h22M19 1l4 3.5L19 8" stroke={theme.accent} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </div>
        )}
        {slide.type === 'closing' && (
          <div className="lt-rise" style={{ marginTop: 26, animationDelay: '.28s' }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 11,
              padding: '13px 22px', borderRadius: 999,
              border: `1px solid ${theme.accent}`, color: theme.accent,
              fontFamily: 'Hanken Grotesk, sans-serif',
            }}>
              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke={theme.accent} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 11.5a8.38 8.38 0 0 1-9 8.4 8.5 8.5 0 0 1-3.8-.9L3 20l1.1-3.1A8.38 8.38 0 0 1 3.2 11 8.5 8.5 0 0 1 21 11.5Z" />
              </svg>
              <span style={{ display: 'flex', flexDirection: 'column', textAlign: 'left' }}>
                <span style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', color: theme.inkSoft, whiteSpace: 'nowrap' }}>{slide.ctaLabel}</span>
                <span style={{ fontSize: 16, fontWeight: 700, letterSpacing: '0.02em', whiteSpace: 'nowrap', marginTop: 2 }}>{slide.cta}</span>
              </span>
            </div>
          </div>
        )}
      </div>
    );
  }

  if (slide.type === 'list') {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
        <Kicker theme={theme}>{slide.kicker}</Kicker>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          {slide.points.map((p, i) => (
            <div key={i} className="lt-rise" style={{ display: 'flex', gap: 15, animationDelay: `${0.14 + i * 0.1}s` }}>
              <span style={{
                fontFamily: 'Cormorant Garamond, serif', fontStyle: 'italic', fontWeight: 600,
                fontSize: 24, lineHeight: 1, color: theme.accent, flex: '0 0 auto', width: 22, paddingTop: 2,
              }}>{['i', 'ii', 'iii', 'iv', 'v'][i]}</span>
              <p style={{
                fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 15.5, lineHeight: 1.5,
                color: theme.ink, margin: 0,
              }}>{p}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 4 }}>
          <Highlight theme={theme} delay={`${0.14 + slide.points.length * 0.1}s`}>{slide.highlight}</Highlight>
        </div>
      </div>
    );
  }

  /* type: text */
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      <Kicker theme={theme}>{slide.kicker}</Kicker>
      <h2 className="lt-rise" style={{
        fontFamily: 'Cormorant Garamond, serif', fontWeight: 600, margin: 0,
        fontSize: 33, lineHeight: 1.06, letterSpacing: '-0.005em',
        color: theme.ink, animationDelay: '.12s',
      }}>{slide.title}</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {slide.body.map((b, i) => (
          <p key={i} className="lt-rise" style={{
            fontFamily: 'Hanken Grotesk, sans-serif', fontSize: 16, lineHeight: 1.58,
            color: theme.inkSoft, margin: 0, animationDelay: `${0.2 + i * 0.08}s`,
          }}>{b}</p>
        ))}
      </div>
      <div style={{ marginTop: 6 }}>
        <Highlight theme={theme} delay={`${0.2 + slide.body.length * 0.08 + 0.05}s`}>{slide.highlight}</Highlight>
      </div>
    </div>
  );
}

/* -- um card de story completo -- */
function StoryCard({ slide, theme, index, total, frameOn, auto, speed, paused, onComplete }) {
  const bgColor = (index % 2 === 1 && theme.alt) ? theme.bgAlt : theme.bg;
  const centered = slide.type === 'cover' || slide.type === 'closing';
  return (
    <div style={{ position: 'absolute', inset: 0, background: bgColor, color: theme.ink, overflow: 'hidden' }}>
      {/* moldura */}
      {frameOn && (
        <div style={{ position: 'absolute', inset: 16, border: `1px solid ${theme.frame}`, borderRadius: 4, pointerEvents: 'none' }}>
          {['tl', 'tr', 'bl', 'br'].map((c) => (
            <span key={c} style={{
              position: 'absolute', width: 14, height: 14, borderColor: theme.accentSoft, borderStyle: 'solid',
              [c[0] === 't' ? 'top' : 'bottom']: -1, [c[1] === 'l' ? 'left' : 'right']: -1,
              borderWidth: `${c[0] === 't' ? 1 : 0}px ${c[1] === 'r' ? 1 : 0}px ${c[0] === 'b' ? 1 : 0}px ${c[1] === 'l' ? 1 : 0}px`,
            }} />
          ))}
        </div>
      )}

      {/* conteúdo em coluna */}
      <div style={{
        position: 'absolute', inset: 0, paddingTop: 52,
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ padding: '0 30px' }}>
          <Progress total={total} index={index} theme={theme} auto={auto} speed={speed} paused={paused} onComplete={onComplete} />
          <div style={{ marginTop: 22 }}>
            <HeaderLockup theme={theme} index={index} total={total} />
          </div>
        </div>

        <div key={index} style={{
          flex: 1, display: 'flex', flexDirection: 'column',
          justifyContent: centered ? 'center' : 'center',
          padding: '0 34px',
        }}>
          <SlideBody slide={slide} theme={theme} />
        </div>

        <div style={{ padding: '0 30px 34px' }}>
          <FooterSig theme={theme} />
        </div>
      </div>
    </div>
  );
}

window.StoryCard = StoryCard;
window.Mark = Mark;